/**
 * Patient Portal CSS - Professional Clean Design
 * Matching reference image exactly
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ============================================
   CSS Reset & Base
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.patient-portal-page {
    background: #E8E8E8;
    color: #2D2D2D;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

.patient-portal-page button,
.patient-portal-page input,
.patient-portal-page select,
.patient-portal-page textarea {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
}


/* ============================================

   Main Wrapper

   ============================================ */

.pp-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* ============================================

   Dark Header

   ============================================ */

.pp-header {
    background: #2D2D2D;
    padding: 20px 40px;
    border-bottom: 1px solid #1a1a1a;
}

.pp-header-content {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pp-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pp-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-header-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-header-brand-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFC53A;
    line-height: 1.1;
}

.pp-header-brand-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #F7F7F7;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pp-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    border-right: 1px solid #3A3F46;
}

.pp-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pp-user-icon {
    width: 24px;
    height: 24px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFC53A;
    flex-shrink: 0;
}

.pp-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-header-identity {
    display: none;
    flex-direction: column;
    gap: 4px;
}

.pp-header-logo {
    width: 120px;
    height: auto;
    display: block;
}

.pp-header-name {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.2;
    white-space: nowrap;
}

.pp-title {
    font-size: 20px;
    font-weight: 700;
    color: #FFC53A;
    margin: 0;
    line-height: 1.2;
}

.pp-subtitle {
    font-size: 14px;
    color: #FFFFFF;
    margin: 0;
    font-weight: 400;
}

.pp-logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #4A4A4A;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.pp-logout-btn:hover {
    background: #3A3A3A;
    border-color: #5A5A5A;
}


/* ============================================
   Header Navigation (Treatments & Portal)
   ============================================ */

.pp-header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.pp-header-notifications {
    position: relative;
    display: flex;
    align-items: center;
}

.pp-notifications-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1F1F1F;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pp-notifications-toggle:hover,
.pp-notifications-toggle:focus-visible {
    border-color: #FFC53A;
    color: #FFC53A;
    outline: none;
    box-shadow: none !important;
}

.pp-notifications-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fdc438;
}

.pp-notifications-icon svg {
    width: 26px;
    height: 26px;
}

.pp-notifications-label {
    font-size: 12px;
    letter-spacing: 0.2px;
}

.pp-notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #DC2626;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 0 0 2px #2D2D2D;
}

.pp-notifications-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 340px;
    max-width: 90vw;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF6 100%);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 14px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18), 0 4px 14px rgba(15, 23, 42, 0.12);
    padding: 0;
    z-index: 50;
    display: none;
    overflow: hidden;
}

.pp-header-notifications.is-open .pp-notifications-panel {
    display: block;
}

.pp-notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 13px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(255, 197, 58, 0.16) 0%, rgba(255, 197, 58, 0.05) 100%);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0f172a;
}

.pp-notifications-close {
    border: 1px solid rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.8);
    color: #334155;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pp-notifications-close:hover,
.pp-notifications-close:focus-visible {
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.28);
    background: #FFFFFF;
    outline: none;
}

.pp-notifications-body {
    max-height: 360px;
    overflow-y: auto;
    padding: 12px 12px 14px;
}

.pp-notifications-body::-webkit-scrollbar {
    width: 8px;
}

.pp-notifications-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

.pp-notifications-body::-webkit-scrollbar-track {
    background: rgba(248, 250, 252, 0.75);
}

.pp-notifications-empty {
    text-align: center;
    font-size: 13px;
    color: #475569;
    padding: 18px 12px;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.7);
}

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

.pp-notifications-item {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #FFFFFF;
    padding: 10px 12px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    transition: all 0.2s ease;
    position: relative;
}

.pp-notifications-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, #FFC53A 0%, #EAA300 100%);
    opacity: 0.9;
}

.pp-notifications-item:hover {
    border-color: #CBD5E1;
    background: #FFFCF1;
    transform: translateY(-1px);
}

.pp-notifications-item strong,
.pp-notifications-item a {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    text-decoration: none;
}

.pp-notifications-item a:hover,
.pp-notifications-item a:focus-visible {
    color: #1D4ED8;
    text-decoration: underline;
    outline: none;
}

.pp-notifications-item p {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
}

.pp-notification-card {
    width: 100%;
    text-align: left;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #111827;
    font-size: 13px;
}

.pp-notification-card:hover,
.pp-notification-card:focus-visible {
    border-color: #FBBF24;
    background: #FFF7ED;
    outline: none;
}

.pp-notification-title {
    font-weight: 700;
    font-size: 13px;
    color: #111827;
}

.pp-notification-desc {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
}

.pp-notification-cta {
    font-size: 12px;
    font-weight: 700;
    color: #B45309;
}

.pp-notification-card.is-muted {
    cursor: default;
    background: #FFFFFF;
}

.pp-notification-card.is-muted:hover {
    border-color: #E5E7EB;
    background: #FFFFFF;
}

.pp-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pp-nav-link {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.pp-nav-item:hover,
.pp-nav-item.opened {
    color: #FFC53A;
}

.pp-header .pp-nav-link:hover,
.pp-header .pp-nav-link:focus,
.pp-header .pp-nav-link:focus-visible {
    color: #FFC53A;
}

.pp-chevron {
    transition: transform 0.2s ease;
}

.pp-dropdown-wrapper.opened .pp-chevron,
.pp-dropdown-wrapper.is-open .pp-chevron {
    transform: rotate(180deg);
}

.pp-tretment-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: #FFFFFF;
    min-width: 310px;
    border-radius: 12px;
    border: 1px solid #e7ebf0;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
    padding: 10px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.pp-dropdown-wrapper.opened .pp-tretment-dropdown-menu,
.pp-dropdown-wrapper.is-open .pp-tretment-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block;
}

button#treatments-dropdown-toggle {
    font-size: 15px;
    font-weight: 500;
}

button#treatments-dropdown-toggle:hover {
    box-shadow: none;
}

/* Rich Treatments List (from shortcode) */

.pp-treatments-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pp-treatment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pp-treatment-item:hover {
    background: #fff8e8;
    border-color: #ffe0a4;
    transform: translateY(-1px);
}

.pp-treatment-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff4d3;
    color: #a86c00;
    flex-shrink: 0;
}
.pp-treatment-icon-wrap svg {
    display: block;
}
.pp-treatment-icon-wrap--trt {
    background: #ffeec2;
    color: #935f00;
}
.pp-treatment-icon-wrap--weight {
    background: #e9f8ef;
    color: #157347;
}
.pp-treatment-icon-wrap--peptides {
    background: #eaf2ff;
    color: #1d4ed8;
}
.pp-treatment-icon-wrap--labs {
    background: #f1ecff;
    color: #6d28d9;
}

.pp-treatment-details {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    min-width: 0;
}

.pp-treatment-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #2D2D2D;
}

.pp-treatment-desc {
    display: block;
    font-size: 13px;
    color: #64748B;
}

.pp-dropdown-divider {
    height: 1px;
    background: #EEEEEE;
    margin: 8px 0;
}

.pp-dropdown-item.pp-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #f7d48f;
    background: #fff7e5;
    color: #9a6400;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.pp-portal-link svg {
    stroke-width: 2.2px;
}


/* ============================================

   Tab Navigation

   ============================================ */

.pp-tabs {
    background: #E8E8E8;
    padding: 30px 40px 0;
    border-bottom: none;
    max-width: 1300px;
    margin: auto;
    width: 100%;
}

.pp-tabs-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
}

.pp-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.pp-tab:focus {
    background: #FFFFFF;
    color: #666666;
}

.pp-tab svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.pp-tab:hover {
    background: #F5F5F5;
    color: #2D2D2D;
    border-color: #D0D0D0;
    box-shadow: none;
}

.pp-tab.active {
    background: #FFC53A;
    color: #2D2D2D;
    font-weight: 600;
    border-color: #FFC53A;
}

.pp-tab.active svg {
    opacity: 1;
}


/* Logout Tab Special Styling */

.pp-tab-logout {
    background: transparent !important;
    color: #6B7280 !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
}

.pp-tab-logout:hover {
    background: #F1F5F9 !important;
    color: #1f211d !important;
}

.pp-tab-icon-box {
    display: flex;
}

/* ============================================

   Main Content

   ============================================ */

.pp-content {
    flex: 1;
    padding: 30px;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

.pp-tab-content {
    display: none;
}

.pp-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================

   Main Card White Container

   ============================================ */

.pp-main-card {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(255, 197, 58, 0.3);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 30px;
    overflow: hidden;
}


/* ============================================

   Action Required Header

   ============================================ */

.pp-action-header {
    padding: 24px 30px 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    /* User requested styles */
    background-image: linear-gradient(to right, rgba(255, 197, 58, 0.05), rgba(0, 0, 0, 0));
    border: 0px solid rgb(229, 229, 229);
    box-sizing: border-box;
    color: rgb(10, 10, 10);
}

.pp-action-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #FFC53A;
}

.pp-action-text-content {
    flex: 1;
}

.pp-action-title {
    font-size: 15px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0 0 4px 0;
}

.pp-action-subtitle {
    font-size: 13px;
    color: #4A4A4A;
    margin: 0;
    line-height: 1.5;
}


/* ============================================

   Sections inside Card

   ============================================ */

.pp-card-section {
    padding: 20px 30px;
}

.pp-section-heading {
    font-size: 19px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0 0 16px 0;
}

.pp-req-error {
    background: #FFF9E6;
    border: 1px solid #FFE5A3;
    color: #2D2D2D;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 12px;
}

.pp-req-error__message {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.pp-req-error__actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-req-error__action {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 11px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pp-req-error__action--link {
    background: #FFC53A;
    border: 1px solid #FFC53A;
    color: #0A0A0A;
}

.pp-req-error__action--link:hover {
    background: #EAB11F;
    border-color: #EAB11F;
    color: #0A0A0A;
}

.pp-req-error__action--button {
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    color: #2D2D2D;
    cursor: pointer;
}

.pp-req-error__action--button:hover {
    border-color: #A8A8A8;
    color: #111111;
}

@media (max-width: 640px) {
    .pp-req-error__actions {
        gap: 6px;
    }

    .pp-req-error__action {
        width: 100%;
        text-align: center;
    }
}


/* Separator Line */

.pp-separator {
    height: 1px;
    background: #E0E0E0;
    margin: 0 0;
}


/* ============================================

   Order Card

   ============================================ */

.pp-order-card {
    /* User requested styles */
    background-image: linear-gradient(to right, rgba(255, 197, 58, 0.1), rgba(0, 0, 0, 0));
    border: 1px solid rgba(255, 197, 58, 0.3);
    border-radius: 8px;
    box-sizing: border-box;
    color: rgb(10, 10, 10);
    margin-bottom: 16px;
    overflow: hidden;
}

.pp-order-header {
    background: transparent;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 197, 58, 0.2);
}

.pp-order-label {
    font-size: 15px;
    font-weight: 700;
    color: #FFC53A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pp-order-date {
    font-size: 11px;
    color: #888888;
    display: block;
    margin-top: 2px;
    font-weight: normal;
}

.pp-order-label-container {
    display: flex;
    flex-direction: column;
}

.pp-order-status {
    font-size: 14px;
    color: #D35400;
    background: #FFE0B2;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 600;
    margin-left: auto;
}


/* ============================================

   Order Body - New Clean Layout

   ============================================ */

.pp-order-body {
    padding: 20px;
}

.pp-product-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.pp-product-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #FFC53A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2D2D2D;
}

.pp-product-icon svg {
    width: 20px;
    height: 20px;
}

.pp-product-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pp-product-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pp-product-name {
    font-size: 14px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0;
    flex-shrink: 0;
}

.pp-product-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pp-product-price-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    width: fit-content;
    padding: 4px 12px;
    border: 1px solid rgb(226, 232, 240);
    border-radius: 8px;
}

.pp-price-label {
    font-size: 10px;
    font-weight: 600;
    line-height: normal;
    color: #888888;
    letter-spacing: 0.5px;
}

.pp-price-value {
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
}


/* ============================================

   Badges

   ============================================ */

.pp-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-transform: capitalize;
}

.pp-badge-program {
    background: #E3F2FD;
    color: #1565C0;
    border: none;
}

.pp-badge-plan {
    background: #E3F2FD;
    color: #1565C0;
    border: none;
}


/* ============================================

   Buttons

   ============================================ */

.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid;
}

.pp-btn:focus,
.pp-btn:focus-visible {
    background: #FFC53A;
}

.pp-btn-change {
    background: #FFFFFF;
    border-color: #FFC53A;
    color: #2D2D2D;
}

.pp-btn-change:focus {
    background: #FFF9E6;
    color: #2D2D2D;
}

.pp-btn-change:hover {
    background: #FFF9E6;
    color: #2D2D2D;
}

.pp-btn-edit {
    background: #FFFFFF !important;
    border-color: #FFC53A;
    color: #2D2D2D;
}

.pp-btn-edit:focus {
    background: #FFF9E6 !important;
    color: #2D2D2D;
}

.pp-btn-edit:hover {
    background: #FFF9E6 !important;
    color: #2D2D2D;
}

.pp-btn-yellow {
    background: #FFC53A;
    border-color: #FFC53A;
    color: #2D2D2D !important;
}

.pp-available-footer a.pp-btn {
    font-size: 12px !important;
}

.pp-btn-yellow:hover {
    background: #FDC438;
}

.pp-action-btn--strong {
    font-weight: 700;
}

.pp-btn-outline-dark {
    background: #FFFFFF;
    border-color: #D0D0D0;
    color: #2D2D2D;
}

.pp-btn-outline-dark:hover {
    background: #D0D0D0;
}

.pp-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pp-btn:not([disabled]):hover,
.pp-btn:not([disabled]):focus-visible {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.pp-action-hidden {
    display: none;
}


/* ============================================

   Included Section

   ============================================ */

.pp-included-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 197, 58, 0.15);
}

.pp-included-title {
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    margin: 0 0 10px 0;
}

.pp-included-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pp-included-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #F6FFF3;
    border: 1px solid #DAEAD4;
    border-radius: 8px;
    font-size: 14px;
    color: #2D2D2D;
}

.pp-check-icon {
    width: 14px;
    height: 14px;
    color: #4CAF50;
    flex-shrink: 0;
}


/* ============================================
   Active Treatment
   ============================================ */

.pp-active-card {
    background: linear-gradient(to right, rgba(255, 197, 58, 0.12), rgba(255, 197, 58, 0.02));
    border: 1px solid rgba(255, 197, 58, 0.4);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-active-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pp-active-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pp-active-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #FFC53A;
    color: #1f211d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-active-name {
    font-size: 20px;
    font-weight: 700;
    color: #1f211d;
    margin: 0;
}

.pp-active-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    color: #64748B;
}

.pp-active-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.pp-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 197, 58, 0.6);
    background: rgba(255, 197, 58, 0.2);
    font-size: 11px;
    font-weight: 600;
    color: #1f211d;
}

.pp-active-remaining {
    text-align: right;
}

.pp-active-remaining-value {
    font-size: 26px;
    font-weight: 700;
    color: #FFC53A;
    line-height: 1;
}

.pp-active-remaining-label {
    font-size: 10px;
    color: #64748B;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pp-active-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.pp-active-meta-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pp-active-meta-label {
    font-size: 10px;
    color: #94A3B8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pp-active-meta-value {
    font-size: 13px;
    color: #1f211d;
    font-weight: 600;
}

.pp-active-progress {
    margin-top: 8px;
}

.pp-active-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748B;
    margin-bottom: 6px;
}

.pp-progress-track {
    width: 100%;
    height: 10px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
}

.pp-progress-fill {
    display: block;
    height: 100%;
    background: #FFC53A;
    border-radius: inherit;
}

.pp-active-empty {
    background: #F8FAFC;
    border: 1px dashed #E2E8F0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: #64748B;
}

.pp-active-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f211d;
    margin-bottom: 6px;
}

.pp-active-empty-subtitle {
    font-size: 12px;
    color: #64748B;
}


/* ============================================
   Steps to Complete List
   ============================================ */

.pp-steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-steps-list>* {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pp-steps-list.is-loading {
    position: relative;
    pointer-events: none;
}

.pp-steps-list.is-loading>* {
    opacity: 0;
    transform: translateY(6px);
}

.pp-steps-list.is-loading::before {
    content: "Loading your requirements...";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-size: 13px;
    font-weight: 600;
    background: rgba(248, 250, 252, 0.92);
    border: 1px dashed #E2E8F0;
    border-radius: 8px;
    z-index: 2;
}

.pp-steps-list.is-loading::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #E2E8F0;
    border-top-color: #FFC53A;
    animation: pp-steps-spin 0.8s linear infinite;
    z-index: 3;
}

@keyframes pp-steps-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-steps-list>* {
        transition: none;
    }

    .pp-steps-list.is-loading>* {
        transform: none;
    }

    .pp-steps-list.is-loading::after {
        animation: none;
    }
}

.pp-step-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 8px;
    border: 1px solid;
}

.pp-step-active {
    background: #FFF9E6;
    border-color: #FFD36A;
    border-width: 2px;
}

.pp-step-complete {
    background: #F6FFF3;
    border-color: #DAEAD4;
    color: #2D2D2D;
}

.pp-step-locked {
    background: #FFFFFF;
    border-color: #E0E0E0;
    color: #999999;
}

.pp-step-locked.pp-step-payment {
    background: #F8F9FA;
    border-style: dashed;
}

.pp-step-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.pp-step-active .pp-step-icon {
    background: #FFC53A;
    color: #2D2D2D;
    width: 40px;
    height: 40px;
}

.pp-step-complete .pp-step-icon {
    width: 40px;
    height: 40px;
    background: #22C55E;
    color: #FFFFFF;
}

.pp-step-locked .pp-step-icon {
    background: #E0E0E0;
    color: #FFFFFF;
}

.pp-step-content {
    flex: 1;
}

.pp-step-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0;
    color: #2D2D2D !important;
}

.pp-step-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.pp-step-title-row .pp-step-status {
    margin-top: 0;
    margin-left: 0;
}

.pp-step-title-row .pp-step-status.pp-step-badge {
    margin-left: 0;
}

.pp-step-locked .pp-step-title {
    color: #888888;
}

.pp-step-subtitle {
    font-size: 13px;
    color: #666666;
    margin: 0;
}

.pp-step-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #475569;
}

.pp-consult-nowrap {
    white-space: nowrap;
}

.pp-inline-link {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #2563EB;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.pp-inline-link:hover,
.pp-inline-link:focus {
    color: #1D4ED8;
}

.pp-consult-meet-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    background: #E0F2FE;
    border: 1px solid #7DD3FC;
    border-radius: 999px;
    padding: 6px 12px;
}

.pp-consult-meet-link:hover,
.pp-consult-meet-link:focus {
    color: #0b1220;
    background: #BAE6FD;
    border-color: #38BDF8;
}

.pp-consult-meet-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: auto;
}

.pp-consult-meet-btn.is-disabled {
    background: #FDE68A;
    border-color: #FCD34D;
    color: #B45309;
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: none;
}

.pp-consult-meet-hint {
    font-size: 12px;
    color: #6B7280;
}

.pp-consult-warning {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #B45309;
}

.pp-step-status {
    margin-top: 4px;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7280;
}

.pp-step-complete .pp-step-status {
    margin-top: 0;
}

.pp-step-locked .pp-step-subtitle {
    color: #999999;
}

.pp-step-action {
    display: flex;
    gap: 8px;
}

#treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-action {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    align-self: stretch;
    margin-left: auto;
}

.pp-badge-locked {
    display: inline-flex;
    align-self: flex-start;
    width: auto;
    font-size: 11px !important;
    color: #999999;
    border: 1px solid #D0D0D0;
    padding: 2px 8px;
    border-radius: 8px;
}


/* Medical History & ID step */

.pp-step-card.pp-step-medical {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.pp-step-medical-complete,
.pp-step-medical-progress {
    width: 100%;
    border-radius: 8px;
}

.pp-step-medical-complete {
    display: none;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 16px 18px;
    background: linear-gradient(90deg, #F0FDF4, #ECFDF5);
    border: 1px solid #BBF7D0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.pp-step-medical-progress {
    display: flex;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid rgba(255, 197, 58, 0.4);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.pp-step-medical-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.pp-step-medical-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 197, 58, 0.2);
    color: #1f211d;
    flex-shrink: 0;
}

.pp-step-medical-icon-complete {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #22C55E;
    color: #FFFFFF;
    flex-shrink: 0;
}

.pp-step-medical-info {
    min-width: 200px;
}

.pp-step-medical-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pp-step-medical-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f211d;
    margin: 0;
}

.pp-step-medical-subtitle {
    font-size: 12px;
    color: #64748B;
    margin-top: 2px;
}

.pp-step-medical-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #94A3B8;
    margin-top: 6px;
}

.pp-step-medical-badges {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.pp-step-medical-action {
    flex-shrink: 0;
}

.pp-step-medical-action .pp-btn-intake {
    height: auto;
    min-height: 64px;
    padding: 8px 32px;
    border-radius: 8px;
    border: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    gap: 8px;
    line-height: 1.2;
    font-size: 16px;
    font-weight: 700;
}

.pp-step-medical-complete-body {
    flex: 1 1 260px;
    min-width: 0;
}

.pp-step-medical-complete > .pp-step-badge--outline {
    margin-left: auto;
    flex-shrink: 0;
}

.pp-step-medical-complete-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 4px;
    min-width: 0;
    width: fit-content;
}

.pp-step-medical-complete-title p {
    font-size: 16px !important;
    font-weight: 700;
    color: #1f211d;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pp-step-medical-complete-title .pp-step-badge {
    flex-shrink: 0;
    margin-left: 0;
}

.pp-step-medical-complete-subtitle {
    font-size: 13px !important;
    color: #666666;
    margin: 0;
}

.pp-step-card.pp-step-complete .pp-step-medical-complete {
    display: flex;
}

.pp-step-card.pp-step-complete .pp-step-medical-progress {
    display: none;
}

.pp-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px !important;
    font-weight: 600;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-step-badge--progress {
    background: #DBEAFE;
    color: #1D4ED8;
    border-color: #BFDBFE;
}

.pp-step-badge--success {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.pp-step-badge--success::before {
    content: "✓";
    font-size: 10px;
    line-height: 1;
    margin-right: 4px;
}

.pp-step-badge--outline {
    background: rgba(255, 255, 255, 0.7);
    color: #15803D;
    border-color: #BBF7D0;
    text-transform: none;
    letter-spacing: 0;
}

.pp-step-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    font-size: 10px;
    font-weight: 600;
    color: #64748B;
    text-transform: none;
    letter-spacing: 0;
}

.pp-step-mini::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid #CBD5E1;
    background: transparent;
}

.pp-step-mini.is-complete {
    background: #ECFDF3;
    border-color: #BBF7D0;
    color: #15803D;
}

.pp-step-mini.is-complete::before {
    background: #22C55E;
    border-color: #22C55E;
}

@media (max-width: 960px) {
    .pp-step-medical-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-step-medical-badges {
        justify-content: flex-start;
    }

    .pp-step-medical-action {
        width: 100%;
    }

    .pp-step-medical-action .pp-btn {
        width: 100%;
    }
}


/* Payment Details Box */

.pp-step-payment {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}

.pp-step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px dashed #E0E0E0;
}

#treatments-tab .pp-step-payment .pp-step-header {
    padding: 16px 0;
}

.pp-payment-details {
    padding: 0 20px 20px;
    display: flex;
    gap: 12px;
}

.pp-payment-box {
    flex: 1;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 12px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 60px;
    position: relative;
}

.pp-payment-paid {
    border-color: #A3D9A5;
}

.pp-payment-due {
    border-color: #FFC53A;
    background: #FFFDF5;
}

.pp-box-label {
    font-size: 11px;
    color: #666666;
    margin-bottom: 4px;
}

.pp-box-value {
    font-size: 16px;
    font-weight: 700;
    color: #2D2D2D;
}

.pp-badge-success {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 10px;
    background: #D1FAE5;
    color: #065F46;
    padding: 2px 6px;
    border-radius: 8px;
}

.pp-badge-pending {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 10px;
    background: #FFE0B2;
    color: #E65100;
    padding: 2px 6px;
    border-radius: 8px;
}


/* Shipping Notice */

.pp-shipping-notice {
    display: flex;
    width: 100%;
    justify-content: center;
}

.pp-shipping-notice-inner {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    background: #FFF9E6;
    border: 1px solid #FFE5A3;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 16px;
    font-size: 15px;
    color: #2D2D2D;
    font-weight: 500;
}

.pp-shipping-notice-inner svg {
    color: #FFC53A;
}

.pp-shipping-notice__status-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-shipping-notice__message {
    margin: 0;
    color: #374151;
}

.pp-shipping-notice__meta {
    margin: 0;
    color: #4B5563;
    font-size: 13px;
}

.pp-shipping-notice__meta a {
    color: #1D4ED8;
    font-weight: 600;
}


/* Requirements Popup */

.pp-req-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.pp-req-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}

.pp-req-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pp-req-modal.open .pp-req-modal__overlay {
    opacity: 1;
}

.pp-req-modal__content {
    position: relative;
    width: min(640px, 92vw);
    max-height: 86vh;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 24px 20px;
    transform: translateY(18px) scale(0.98);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.pp-req-modal.open .pp-req-modal__content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.pp-req-modal__close {
    position: absolute;
    right: 18px;
    top: 16px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 22px;
    line-height: 30px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pp-req-modal__close:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    transform: scale(1.04);
}

.pp-req-modal__header {
    padding-right: 50px;
}

.pp-req-modal__eyebrow {
    display: inline-flex;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748B;
    font-weight: 700;
    margin-bottom: 8px;
}

.pp-req-modal__title {
    font-size: 22px;
    color: #0F172A;
    font-weight: 700;
    margin-bottom: 6px;
}

.pp-req-modal__subtitle {
    font-size: 14px;
    color: #475569;
    margin-bottom: 16px;
}

.pp-req-modal__current {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg, #FFFCF0 0%, #FFF5D9 100%);
    border: 1px solid #FFD980;
    color: #7A5600;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.pp-req-modal__current-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pp-req-modal__current-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.42);
    background: rgba(254, 240, 138, 0.55);
    color: #854D0E;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pp-req-modal__current-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pp-req-modal__current-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 2px solid #F4C44B;
    background: #FFFFFF;
    color: #A16207;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pp-req-modal__current-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: currentColor;
}

.pp-req-modal__current-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pp-req-modal__current-copy strong {
    color: #1E293B;
    font-size: 18px;
    line-height: 1.22;
    font-weight: 800;
}

.pp-req-modal__current-copy p {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.pp-req-modal__current-label {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #9A6B00;
}

.pp-req-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    overflow: auto;
}

.pp-req-modal__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.pp-req-modal__item.is-current {
    border-color: #FFC53A;
    background: #FFFAEC;
}

.pp-req-modal__item.is-complete {
    border-color: #C7EAD1;
    background: #F3FBF6;
}

.pp-req-modal__icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid #CBD5E1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    background: #FFFFFF;
    flex: 0 0 auto;
}

.pp-req-modal__item.is-complete .pp-req-modal__icon {
    border-color: #34D399;
    background: #34D399;
    color: #FFFFFF;
}

.pp-req-modal__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-req-modal__label {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.pp-req-modal__status {
    font-size: 12px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.pp-req-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.pp-req-modal__actions .pp-btn {
    min-height: 44px;
    padding: 8px 20px !important;
    font-size: 16px !important;
    font-weight: 700;
    border-radius: 8px;
}

#pp-req-modal-cta {
    min-width: 220px;
}

.pp-profile-modal__content {
    width: min(700px, 94vw);
}

.pp-profile-modal__form {
    margin-top: 4px;
}

.pp-profile-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pp-profile-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-profile-modal__field span {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pp-profile-modal__input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
    color: #0f172a;
    background: #fff;
}

.pp-profile-modal__input:focus {
    outline: none;
    border-color: #ffc53a;
    box-shadow: 0 0 0 3px rgba(255, 197, 58, 0.24);
}

.pp-profile-modal__status {
    margin: 10px 0 0;
    min-height: 20px;
    font-size: 13px;
    color: #64748b;
}

#pp-profile-modal-save {
    min-width: 220px;
}

.pp-final-payment-modal__content {
    width: min(560px, 92vw);
}

.pp-final-payment-modal__summary {
    display: grid;
    gap: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px;
}

.pp-final-payment-modal__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: #334155;
}

.pp-final-payment-modal__row strong {
    color: #0F172A;
}

.pp-final-payment-modal__row.is-due {
    padding-top: 8px;
    border-top: 1px dashed #CBD5E1;
    font-weight: 700;
}

.pp-final-payment-modal__row.is-due strong {
    font-size: 18px;
}

.pp-final-payment-modal__card {
    margin-top: 12px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    padding: 12px;
    color: #334155;
}

.pp-final-payment-modal__methods {
    display: grid;
    gap: 8px;
}

.pp-final-payment-modal__method {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pp-final-payment-modal__method:hover {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

.pp-final-payment-modal__method.is-selected {
    border-color: #FACC15;
    background: #FFFBEB;
}

.pp-final-payment-modal__method input[type="radio"] {
    margin-top: 3px;
}

.pp-final-payment-modal__method-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-final-payment-modal__method-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.pp-final-payment-modal__method-meta {
    font-size: 12px;
    color: #64748B;
    line-height: 1.3;
}

.pp-final-payment-modal__method-badge {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 2px 8px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 11px;
    font-weight: 700;
}

.pp-final-payment-modal__status {
    margin: 10px 0 0;
    min-height: 20px;
    color: #B45309;
}

@media (max-width: 768px) {
    .pp-req-modal__content {
        width: 94vw;
        padding: 18px;
        border-radius: 8px;
    }

    .pp-req-modal__actions {
        flex-direction: column;
    }

    .pp-req-modal__actions .pp-btn {
        width: 100%;
    }

    .pp-req-modal__current {
        padding: 12px;
    }

    .pp-req-modal__current-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-req-modal__current-body {
        gap: 10px;
    }

    .pp-req-modal__current-icon {
        width: 32px;
        height: 32px;
    }

    .pp-req-modal__current-copy strong {
        font-size: 16px;
    }

    .pp-profile-modal__grid {
        grid-template-columns: 1fr;
    }

    /* Mobile-first compact requirement popup (no internal checklist scrolling). */
    #pp-req-modal .pp-req-modal__content {
        width: min(420px, 95vw);
        max-height: calc(100dvh - 14px);
        padding: 14px 14px 12px;
        border-radius: 10px;
    }

    #pp-req-modal .pp-req-modal__close {
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 26px;
    }

    #pp-req-modal .pp-req-modal__header {
        padding-right: 38px;
    }

    #pp-req-modal .pp-req-modal__eyebrow {
        margin-bottom: 5px;
        font-size: 10px;
    }

    #pp-req-modal .pp-req-modal__title {
        font-size: 19px;
        margin-bottom: 4px;
    }

    #pp-req-modal .pp-req-modal__subtitle {
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.3;
    }

    #pp-req-modal .pp-req-modal__current {
        margin-bottom: 10px;
        padding: 10px 11px;
        gap: 8px;
    }

    #pp-req-modal .pp-req-modal__current-top {
        flex-direction: row;
        align-items: center;
    }

    #pp-req-modal .pp-req-modal__current-body {
        gap: 8px;
    }

    #pp-req-modal .pp-req-modal__current-icon {
        width: 28px;
        height: 28px;
    }

    #pp-req-modal .pp-req-modal__current-icon svg {
        width: 14px;
        height: 14px;
    }

    #pp-req-modal .pp-req-modal__current-copy strong {
        font-size: 15px;
        line-height: 1.2;
    }

    #pp-req-modal .pp-req-modal__current-copy p {
        font-size: 12px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #pp-req-modal .pp-req-modal__list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        overflow: visible;
    }

    #pp-req-modal .pp-req-modal__item {
        padding: 7px 9px;
        gap: 8px;
    }

    #pp-req-modal .pp-req-modal__item.is-complete {
        width: auto;
        border-radius: 999px;
        padding: 6px 9px;
    }

    #pp-req-modal .pp-req-modal__item.is-complete .pp-req-modal__icon {
        width: 20px;
        height: 20px;
        border-width: 1.5px;
    }

    #pp-req-modal .pp-req-modal__item.is-complete .pp-req-modal__label {
        font-size: 12px;
        white-space: nowrap;
    }

    #pp-req-modal .pp-req-modal__item.is-complete .pp-req-modal__status {
        display: none;
    }

    #pp-req-modal .pp-req-modal__item.is-current {
        width: 100%;
        border-radius: 8px;
        padding: 8px 10px;
    }

    #pp-req-modal .pp-req-modal__item.is-current .pp-req-modal__label {
        font-size: 13px;
    }

    #pp-req-modal .pp-req-modal__item.is-current .pp-req-modal__status:last-child {
        display: none;
    }

    #pp-req-modal .pp-req-modal__label {
        font-size: 13px;
    }

    #pp-req-modal .pp-req-modal__status {
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    #pp-req-modal .pp-req-modal__actions {
        margin-top: 10px;
        gap: 0;
    }

    #pp-req-modal .pp-req-modal__actions [data-pp-req-close] {
        display: none;
    }

    #pp-req-modal #pp-req-modal-cta {
        width: 100%;
        min-width: 0;
    }

    #pp-req-modal .pp-req-modal__actions .pp-btn {
        min-height: 46px;
        font-size: 15px !important;
        padding: 10px 14px !important;
    }
}

@media (max-width: 380px) {
    #pp-req-modal .pp-req-modal__content {
        width: 96vw;
        padding: 12px 12px 10px;
    }

    #pp-req-modal .pp-req-modal__title {
        font-size: 18px;
    }

    #pp-req-modal .pp-req-modal__current-copy p {
        display: none;
    }

    #pp-req-modal .pp-req-modal__item.is-current .pp-req-modal__status {
        display: none;
    }

    #pp-req-modal .pp-req-modal__actions .pp-btn {
        min-height: 44px;
        font-size: 14px !important;
        padding: 9px 12px !important;
    }
}


/* Portal Action Modal */

.pp-action-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.pp-action-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}

.pp-action-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pp-action-modal.open .pp-action-modal-overlay {
    opacity: 1;
}

.pp-action-modal-content {
    position: relative;
    width: min(1100px, 92vw);
    height: min(82vh, 760px);
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    z-index: 1;
    display: flex;
    flex-direction: column;
    transform: translateY(18px) scale(0.98);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.pp-action-modal.open .pp-action-modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.pp-action-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #EEF2F7;
    background: #FBFCFE;
}

.pp-action-modal-title {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748B;
    font-weight: 600;
}

.pp-action-modal-body {
    flex: 1;
    min-height: 0;
    position: relative;
}

.pp-action-modal-embed {
    height: 100%;
    width: 100%;
    display: none;
    overflow: auto;
    background: #FFFFFF;
    -webkit-overflow-scrolling: touch;
}

.pp-action-modal-embed iframe {
    display: block;
    width: 100%;
    border: 0;
}

.pp-action-modal-frame {
    width: 100%;
    height: 100%;
    border: 0;
}

.pp-action-modal.has-embed .pp-action-modal-embed {
    display: block;
}

.pp-action-modal.has-embed .pp-action-modal-frame {
    display: none;
}

.pp-action-modal-close {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 22px;
    line-height: 30px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pp-action-modal-close:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .pp-action-modal-content {
        width: 94vw;
        height: 86vh;
        border-radius: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pp-action-modal,
    .pp-action-modal-overlay,
    .pp-action-modal-content,
    .pp-action-modal-close {
        transition: none;
    }
}


/* ============================================

   Responsive Design

   ============================================ */


/* Tablet */

@media (max-width: 1024px) {
    .pp-header {
        padding: 16px 24px;
    }

    .pp-tabs {
        padding: 16px 24px 0;
    }

    .pp-content {
        padding: 24px;
    }

    .pp-product-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pp-product-badges {
        width: 100%;
        justify-content: flex-start;
    }
}


/* Mobile */

@media (max-width: 768px) {
    .patient-portal-page,
    .pp-wrapper,
    .pp-content {
        overflow-x: hidden;
    }

    .pp-header-right {
        flex: 1;
        justify-content: flex-end;
        min-width: 0;
    }

    .pp-header-notifications {
        order: 2;
    }

    .pp-header-nav {
        order: 1;
    }

    .pp-portal-link span {
        font-size: 0;
    }

    .pp-portal-link span::after {
        content: "Portal";
        font-size: 15px;
        font-weight: 600;
        color: inherit;
    }

    /* Header */
    .pp-header {
        padding: 12px 16px;
    }

    .pp-header-content {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .pp-user-icon {
        width: 24px;
        height: 24px;
    }

    .pp-title {
        font-size: 16px;
    }

    .pp-subtitle {
        font-size: 12px;
    }

    .pp-logout-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .pp-header-right {
        gap: 12px;
    }

    .pp-notifications-label {
        display: none;
    }

    .pp-notifications-toggle {
        padding: 8px;
    }

    .pp-notifications-panel {
        position: fixed;
        left: 50%;
        right: auto;
        top: 72px;
        transform: translateX(-50%);
        width: min(92vw, 420px);
        max-width: none;
    }

    .pp-tretment-dropdown-menu {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 72px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        overflow-x: hidden;
        transform: none;
    }

    .pp-dropdown-wrapper.opened .pp-tretment-dropdown-menu,
    .pp-dropdown-wrapper.is-open .pp-tretment-dropdown-menu {
        transform: none;
    }

    /* Tabs */
    .pp-tabs {
        padding: 12px 16px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pp-tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
    }

    .pp-tab {
        padding: 8px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Content */
    .pp-content {
        padding: 16px;
    }

    /* Main Card */
    .pp-main-card {
        border-radius: 8px;
        margin-bottom: 20px;
    }

    /* Action Header */
    .pp-action-header {
        padding: 16px;
        gap: 10px;
    }

    .pp-action-icon {
        width: 18px;
        height: 18px;
    }

    .pp-action-title {
        font-size: 16px;
    }

    .pp-action-subtitle {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Card Sections */
    .pp-card-section {
        padding: 16px;
    }

    .pp-section-heading {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .pp-separator {
        margin: 0 00;
    }

    /* Order Card */
    .pp-order-card {
        margin-bottom: 12px;
    }

    .pp-order-header {
        padding: 12px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pp-order-label {
        font-size: 12px;
    }

    .pp-order-date {
        font-size: 10px;
    }

    .pp-order-status {
        font-size: 13px;
        padding: 3px 10px;
        margin-left: auto;
    }

    /* Order Body */
    .pp-order-body {
        padding: 16px;
    }

    /* Product Header - Keep side-by-side on mobile */
    .pp-product-header {
        display: flex;
        flex-direction: row;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .pp-product-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .pp-product-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Product Main */
    .pp-product-main {
        flex: 1;
        min-width: 0;
        gap: 8px;
    }

    .pp-product-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pp-product-name {
        font-size: 13px;
        line-height: 1.4;
    }

    .pp-product-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pp-badge {
        font-size: 13px;
        padding: 3px 10px;
    }

    .pp-product-price-row {
        margin-top: 4px;
    }

    .pp-price-label {
        font-size: 9px;
    }

    .pp-price-value {
        font-size: 14px;
    }

    /* Buttons - Keep inline, not full width */
    .pp-btn {
        padding: 7px 14px;
        font-size: 12px;
        touch-action: manipulation;
    }

    .pp-btn-change,
    .pp-btn-edit {
        width: auto;
        flex-shrink: 0;
    }

    /* Included Section */
    .pp-included-section {
        margin-top: 12px;
        padding-top: 12px;
    }

    .pp-included-title {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .pp-included-items {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pp-included-item {
        padding: 6px 10px;
        font-size: 13px;
        width: auto;
        flex: 0 0 auto;
    }

    .pp-check-icon {
        width: 12px;
        height: 12px;
    }

    /* Steps to Complete - Compact side-by-side layout */
    .pp-steps-list {
        gap: 10px;
    }

    .pp-step-card.pp-step-complete .pp-step-medical-complete {
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-template-areas:
            "icon body"
            "icon badge";
        align-items: center;
        column-gap: 10px;
        row-gap: 6px;
    }

    .pp-step-medical-icon-complete {
        grid-area: icon;
        align-self: center;
        justify-self: center;
    }

    .pp-step-medical-complete-body {
        grid-area: body;
    }

    .pp-step-medical-complete > .pp-step-badge--outline {
        grid-area: badge;
        justify-self: flex-start;
        margin-left: 0;
        align-self: flex-start;
    }

    .pp-step-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .pp-step-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        align-self: center;
    }

.pp-step-icon svg {
    width: 16px;
    height: 16px;
}

.pp-step-complete .pp-step-icon svg {
    width: 20px;
    height: 20px;
}

    .pp-step-content {
        flex: 1 1 calc(100% - 44px);
        min-width: 0;
    }

    .pp-step-title {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .pp-step-title-row,
    .pp-step-medical-complete-title {
        gap: 6px;
        row-gap: 4px;
    }

    .pp-step-title-row {
        margin-bottom: 4px;
    }

    .pp-step-subtitle {
        font-size: 12px;
        line-height: 1.4;
        margin-top: 0;
    }

    .pp-step-meta {
        font-size: 11px;
    }

    .pp-step-action {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex-shrink: 0;
        align-items: stretch;
        width: 100%;
        order: 3;
    }

    .pp-step-action .pp-btn {
        width: auto;
        min-width: 90px;
    }

    .pp-badge-locked {
        font-size: 10px;
        padding: 3px 8px;
        white-space: nowrap;
    }

    /* Payment Details - Stack vertically on mobile */
    .pp-step-payment {
        display: flex;
        flex-direction: column;
    }

    .pp-step-header {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 0 12px 0;
        gap: 10px;
        border-bottom: 1px dashed #E0E0E0;
        width: 100%;
    }

    .pp-payment-details {
        padding: 0;
        display: flex;
        gap: 8px;
        width: 100%;
    }

    .pp-payment-box {
        flex: 1;
        height: auto;
        min-height: auto;
        padding: 10px;
        position: relative;
        align-items: start;
    }

    .pp-box-label {
        font-size: 9px;
        margin-bottom: 4px;
    }

    .pp-box-value {
        font-size: 15px;
    }

    .pp-badge-success,
    .pp-badge-pending {
        font-size: 8px;
        padding: 2px 5px;
        position: static;
        text-align: center;
        margin-top: 8px;
    }

    /* Shipping Notice */
    .pp-shipping-notice-inner {
        width: 100%;
        max-width: 100%;
        padding: 12px 14px;
        font-size: 14px;
        margin-top: 12px;
        text-align: center;
    }

    .pp-shipping-notice-inner svg {
        width: 14px;
        height: 14px;
    }
}


/* Small Mobile */

@media (max-width: 580px) {
    .pp-header-content {
        gap: 8px;
    }

    .pp-header-left {
        min-width: 0;
        gap: 8px;
        flex-direction: column;
        align-items: center;
    }

    .pp-user-icon {
        display: none;
    }

    .pp-header-user {
        padding-right: 0;
        border-right: 0;
        order: 2;
        width: 100%;
        justify-content: center;
    }

    .pp-header-logo {
        width: 120px;
    }

    .pp-header-brand-title {
        font-size: 14px;
    }

    .pp-header-brand-subtitle {
        font-size: 10px;
        letter-spacing: 0.06em;
    }

    .pp-header-name {
        font-size: 12px;
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pp-header-right {
        gap: 8px;
    }

    .pp-header-nav {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .pp-nav-link {
        padding: 6px 10px;
        font-size: 12px;
    }

    .pp-nav-link .pp-chevron {
        width: 10px;
        height: 10px;
    }

    .pp-notifications-toggle {
        padding: 6px;
    }

    .pp-portal-link span::after {
        font-size: inherit;
    }
}

@media (max-width: 480px) {
    .pp-header-content {
        flex-direction: row;
        align-items: center;
    }

    .pp-header-right {
        width: auto;
        justify-content: flex-end;
    }

    .pp-notifications-panel {
        left: 12px;
        right: 12px;
        top: 70px;
        width: auto;
        transform: none;
    }

    .pp-header {
        padding: 10px 12px;
    }

    .pp-user-icon {
        width: 36px;
        height: 36px;
    }

    .pp-title {
        font-size: 14px;
    }

    .pp-subtitle {
        font-size: 11px;
    }

    .pp-logout-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .pp-content {
        padding: 12px;
    }

    .pp-action-header {
        padding: 12px;
    }

    .pp-card-section {
        padding: 12px;
    }

    .pp-order-body {
        padding: 12px;
    }

    .pp-product-name {
        font-size: 12px;
    }

    .pp-badge {
        font-size: 12px;
        padding: 3px 8px;
    }

    .pp-btn {
        font-size: 11px;
        padding: 7px 14px;
    }
}


/* ============================================
   Base44 Theme Overrides + Portal Expansions
   ============================================ */

.patient-portal-page {
    background: linear-gradient(135deg, #F7F7F7 0%, #DFE9EF 55%, #FFFFFF 100%);
    color: #1f211d;
}

.pp-header {
    background: #1f211d;
    border-bottom: 1px solid #292F36;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.2);
}

.pp-user-icon {
    background: transparent;
    color: #FFC53A;
}

.pp-title {
    color: #FFC53A;
}

.pp-subtitle {
    color: #F7F7F7;
}

.pp-logout-btn {
    border-color: #3A3F46;
    color: #F7F7F7;
}

.pp-logout-btn:hover {
    background: #2A2C29;
    border-color: #4A515A;
}

.pp-tabs {
    background: transparent;
}

.pp-tabs-container {
    background: #FFFFFF;
    border: 1px solid #DFE9EF;
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

@media (min-width: 1024px) {
    .pp-tabs-container {
        width: auto;
        grid-auto-flow: column;
    }
}

.pp-tab {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #6B7280;
    font-weight: 600;
    justify-content: center;
    padding: 10px 12px;
}

.pp-tab:hover {
    background: #F1F5F9;
    color: #1f211d;
}

.pp-tab:focus {
    background: #F1F5F9;
    color: #1f211d;
}

.pp-tab.active:focus {
    background: #FFC53A;
    color: #1f211d;
}

.pp-tab.active {
    background: #FFC53A;
    color: #1f211d;
}

.pp-tab-label {
    display: inline-block;
    font-weight: 500;
}

.pp-content {
    max-width: 1280px;
}

.pp-main-card {
    background: #FFFFFF;
    border: 1px solid rgba(255, 197, 58, 0.3);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.pp-action-header {
    padding: 18px 22px;
    border-bottom: 1px solid #F1F5F9;
    background-image: linear-gradient(90deg, rgba(255, 197, 58, 0.08), rgba(255, 255, 255, 0));
}

.pp-card-section {
    padding: 16px 22px;
}

.pp-section-heading {
    font-size: 19px;
    font-weight: 600;
    color: #1f211d;
}

.pp-separator {
    background: #E2E8F0;
    margin: 0 0;
}

.pp-order-card {
    background: linear-gradient(90deg, rgba(255, 197, 58, 0.1), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 197, 58, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.pp-order-header {
    border-bottom-color: rgba(255, 197, 58, 0.2);
    padding: 12px 16px;
}

.pp-order-label {
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #FFC53A;
}

.pp-order-date {
    font-size: 10px;
    color: #94A3B8;
}

.pp-order-body {
    padding: 16px;
}

.pp-product-header {
    gap: 10px;
    margin-bottom: 12px;
}

.pp-order-status {
    background: #FFEDD5;
    color: #B45309;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 999px;
}

.pp-product-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #FFC53A;
    color: #1f211d;
    overflow: hidden;
}

.pp-product-icon svg {
    width: 16px;
    height: 16px;
}

.pp-detail-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 14px;
}

.pp-summary-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-pp-address-card] .pp-card-body {
    padding-top: 16px;
}

[data-pp-address-card] .pp-card-body .pp-summary-row {
    align-items: flex-start;
}

[data-pp-address-card] .pp-card-body .pp-summary-title {
    margin-bottom: 4px;
}

[data-pp-address-card] .pp-card-body .pp-summary-subtitle {
    margin-bottom: 0;
}

.pp-address-form {
    display: none;
    margin-top: 14px;
    padding: 14px;
    border: 1px dashed #dfe3e8;
    border-radius: 8px;
    background: #f8fafc;
}

[data-pp-address-card].is-editing .pp-address-summary {
    display: none;
}

[data-pp-address-card].is-editing .pp-address-form {
    display: block;
}

.pp-address-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pp-address-form .pp-contact-status {
    font-size: 12px;
    color: #6b7280;
}

.pp-detail-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-detail-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.pp-detail-value {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dfe9ef;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.pp-detail-value:hover {
    border-color: #ffc53a;
}

.pp-detail-readonly {
    background: #f8fafc;
    border-color: #e5e7eb;
}

.pp-detail-icon svg {
    width: 14px;
    height: 14px;
    color: #9ca3af;
    flex-shrink: 0;
}

.pp-detail-text {
    font-size: 14px;
    font-weight: 600;
    color: #1f211d;
}

.pp-detail-hint {
    display: block;
    font-size: 11px;
    color: #9ca3af;
}

.pp-detail-value input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    color: #1f211d;
    width: 100%;
    min-height: 40px;
    display: block;
    padding: 12px 12px;
}

.pp-detail-value.is-readonly {
    background: #f8fafc;
    border-color: #e5e7eb;
    padding: 0;
}

.pp-detail-value.is-readonly input {
    pointer-events: none;
    padding: 16px;
    border: none;
}

.pp-detail-value.pp-detail-editable.editing,
.pp-detail-editable {
    flex-wrap: wrap;
}

.pp-detail-value.editing {
    background: #fff;
    border-color: #ffc53a;
}

.pp-detail-value.editing input {
    pointer-events: auto;
    background: #fff;
    padding: 12px 12px;
}

.pp-detail-value .pp-detail-icon {
    padding-left: 12px;
}

.pp-detail-value .pp-contact-edit-btn {
    margin-right: 12px;
}

.pp-detail-value.editing {
    background: #fff;
    border-color: #ffc53a;
}

.pp-detail-value.editing input {
    pointer-events: auto;
    background: #fff;
}

.pp-detail-value input:focus {
    outline: none;
}

.pp-phone-verification {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-phone-verification-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pp-phone-code-input {
    flex: 1 1 140px;
    max-width: 180px;
    padding: 8px 10px;
    border: 1px solid #dfe9ef;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #1f211d;
}

.pp-detail-value select {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1f211d;
    padding: 0;
    min-height: inherit;
}

.pp-detail-value select:focus {
    outline: none;
    box-shadow: none;
}

.pp-inline-input {
    display: none;
    width: 100%;
}

.pp-inline-text {
    flex: 1;
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f211d;
}

.pp-detail-value.editing .pp-inline-input {
    display: block;
}

.pp-detail-value.editing .pp-inline-text {
    display: none;
}

.pp-contact-edit-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #dfe3e8;
    background: #f6f8fb;
    color: #6b7280;
    transition: all 0.2s ease;
    flex-shrink: 0;
    z-index: 2;
    pointer-events: auto;
}

.pp-contact-edit-btn:hover {
    border-color: #ffc53a;
    color: #d97706;
    background: #fff7e6;
}

.pp-contact-edit-btn svg {
    width: 14px;
    height: 14px;
}

.pp-id-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 8px;
}

.pp-id-status {
    margin-top: 12px;
}

.pp-id-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px dashed #dfe3e8;
    border-radius: 8px;
    background: #f8fafc;
}

.pp-id-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pp-id-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-id-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pp-id-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f211d;
}

.pp-id-subtitle {
    font-size: 12px;
    color: #6b7280;
}

.pp-id-action {
    display: flex;
    align-items: center;
}

.pp-id-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    min-width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #ffc53a;
    color: #1f211d;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.pp-id-upload-btn:hover {
    background: #fdc438;
    transform: translateY(-1px);
}

.pp-id-upload-btn svg {
    width: 16px;
    height: 16px;
}

.pp-contact-form {
    margin-top: 12px;
    display: block;
    width: 100%;
}

.pp-btn-modern {
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(255, 197, 58, 0.35);
}

.pp-contact-status {
    font-size: 12px;
    color: #6b7280;
}

.pp-id-upload-btn input {
    display: none;
}

.pp-contact-form .pp-detail-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    margin-bottom: 14px;
    align-items: start;
}

@media (min-width: 768px) {
    .pp-contact-form .pp-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pp-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.pp-detail-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-detail-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.pp-detail-value {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #dfe9ef;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pp-detail-value:hover {
    border-color: #ffc53a;
}

.pp-detail-readonly {
    background: #f8fafc;
    border-color: #e5e7eb;
}

.pp-detail-icon svg {
    width: 14px;
    height: 14px;
    color: #9ca3af;
}

.pp-detail-text {
    font-size: 14px;
    font-weight: 600;
    color: #1f211d;
}

.pp-detail-hint {
    display: block;
    font-size: 11px;
    color: #9ca3af;
}

.pp-detail-value input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    color: #1f211d;
}

.pp-detail-value input:focus {
    outline: none;
}

.pp-product-icon.pp-product-icon--thumb img,
.pp-product-icon.pp-product-icon--thumb .pp-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-product-name {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.pp-product-badges {
    gap: 6px;
}

.pp-product-price-row {
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-color: #E2E8F0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.pp-price-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

.pp-price-value {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.pp-badge {
    border-radius: 999px;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    color: #475569;
    font-size: 13px;
    padding: 2px 8px;
}

.pp-badge-program,
.pp-badge-plan {
    background: #DBEAFE;
    color: #1D4ED8;
}

.pp-btn {
    padding: 7px 14px;
    border-radius: 8px !important;
    text-decoration: none;
    font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.pp-btn-change,
.pp-btn-edit {
    font-size: 13px;
    padding: 10px 14px;
    border-color: rgba(255, 197, 58, 0.7);
    background: rgba(255, 197, 58, 0.08);
    color: #1f211d;
}

.pp-btn-change:hover,
.pp-btn-edit:hover {
    background: rgba(255, 197, 58, 0.18);
}

.pp-btn-change:focus {
    background: rgba(255, 197, 58, 0.18);
}

.pp-btn-edit {
    background: rgba(255, 197, 58, 0.08) !important;
}

.pp-btn-edit:hover,
.pp-btn-edit:focus {
    background: rgba(255, 197, 58, 0.18) !important;
}

.pp-btn-yellow {
    background: #FFC53A;
    border-color: #FFC53A;
    color: #1f211d;
}

.pp-btn-yellow:hover {
    background: #FDC438;
}

.pp-action-icon,
.pp-order-label,
.pp-shipping-notice-inner svg {
    color: #FFC53A;
}

.pp-step-active .pp-step-icon {
    background: #FFC53A;
}

.pp-btn-outline-dark {
    border-color: #CBD5E1;
    color: #1f211d;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.pp-btn-outline-dark:hover {
    background: #E2E8F0;
}

.pp-btn-outline {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #1f211d;
}

.pp-btn-outline:hover {
    background: #F1F5F9;
}

.pp-btn-outline-danger {
    background: #FFFFFF;
    border: 1px solid #FCA5A5;
    color: #DC2626;
}

.pp-btn-outline-danger:hover {
    background: #FEF2F2;
    border-color: #F87171;
    color: #B91C1C;
}

.pp-included-title {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

.pp-included-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #475569;
    border-radius: 999px;
    font-size: 14px;
    padding: 6px 12px;
}

.pp-check-icon {
    color: #22C55E;
}

.pp-steps-list {
    gap: 8px;
}

.pp-step-card {
    border-radius: 8px;
    padding: 12px 14px;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.pp-step-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

.pp-step-title {
    font-size: 16px;
    font-weight: 600;
}

.pp-step-subtitle {
    font-size: 13px;
    color: #64748B;
}

.pp-step-status {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #94A3B8;
}

.pp-step-action .pp-btn {
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
}

.pp-step-active {
    background: rgba(255, 197, 58, 0.14);
    border-color: rgba(255, 197, 58, 0.4);
}

.pp-step-complete {
    background: #ECFDF3;
    border-color: #BBF7D0;
}

.pp-step-locked {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.pp-step-locked.pp-step-payment {
    background: linear-gradient(90deg, #F8FAFC, #FFFFFF);
}

.pp-badge-locked {
    border-radius: 999px;
    font-size: 10px;
}

.pp-payment-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 18px;
}

.pp-payment-box {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    height: auto;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
}

.pp-payment-paid {
    border-color: #BBF7D0;
}

.pp-payment-due {
    border-color: #FFDFA0;
    background: #FFF7E6;
}

.pp-box-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

.pp-box-value {
    font-size: 15px;
    font-weight: 600;
    color: #0F172A;
}

.pp-badge-success,
.pp-badge-pending {
    border-radius: 999px;
}

.pp-shipping-notice-inner {
    background: #FFF7E6;
    border-color: #FFDFA0;
    color: #1f211d;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}


/* Shared Section + Card Styles */

.pp-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.pp-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f211d;
}

.pp-card {
    background: #FFFFFF;
    border: 1px solid #DFE9EF;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.pp-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid #DFE9EF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FFFFFF;
}

.pp-card-header-gradient {
    background: linear-gradient(90deg, #EFF6FF, #ECFEFF);
}

.pp-card-body {
    padding: 20px 22px;
}

.pp-card-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f211d;
    margin: 0;
}

.pp-card-subtitle {
    font-size: 13px;
    color: #64748B;
    margin-top: 4px;
}

.pp-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pp-card-icon svg {
    width: 22px;
    height: 22px;
}

.pp-card-icon-gold {
    background: linear-gradient(135deg, #FFC53A, #FDC438);
    color: #1f211d;
}

.pp-card-icon-blue {
    background: #2563EB;
    color: #FFFFFF;
}

.pp-card-icon-soft {
    background: rgba(255, 197, 58, 0.2);
    color: #FFC53A;
}


/* Appointment Cards */

.pp-appointments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.pp-info-card {
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 14px;
    border: 2px solid #CCFBF1;
    background: linear-gradient(135deg, #F0FDFA, #FFFFFF);
}

.pp-info-card-teal {
    border-color: #CCFBF1;
    background: linear-gradient(135deg, #F0FDFA, #FFFFFF);
}

.pp-info-card-content {
    flex: 1;
}

.pp-info-card-blue {
    border-color: #DBEAFE;
    background: linear-gradient(135deg, #EFF6FF, #FFFFFF);
}

.pp-info-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    background: #14B8A6;
}

.pp-info-card-blue .pp-info-card-icon {
    background: #3B82F6;
}

.pp-info-card-icon svg {
    width: 22px;
    height: 22px;
}

.pp-info-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f211d;
    margin: 0 0 6px;
}

.pp-info-card-text {
    font-size: 13px;
    color: #475569;
    margin: 0 0 8px;
    line-height: 1.5;
}

.pp-info-highlight {
    color: #0F172A;
    font-weight: 600;
}

.pp-info-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #64748B;
}

.pp-info-card-meta svg {
    width: 14px;
    height: 14px;
}

.pp-info-card-action {
    margin-top: 12px;
}

.pp-info-card-action .pp-btn {
    width: 100%;
    justify-content: center;
}

.pp-appointment-embed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.pp-appointment-embed {
    border: 1px solid #DFE9EF;
    border-radius: 8px;
    padding: 14px;
    background: #F8FAFC;
}

.pp-appointment-embed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.pp-appointment-embed-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
}

.pp-icon-teal {
    background: #14B8A6;
}

.pp-icon-blue {
    background: #3B82F6;
}

.pp-appointment-embed-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f211d;
    margin: 0 0 4px;
}

.pp-appointment-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pp-appointment-custom-copy {
    max-width: 520px;
}

.pp-appointments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pp-appointment-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}

.pp-appointment-tab {
    border: 0;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pp-appointment-tab.is-active {
    background: #FFFFFF;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.pp-appointment-hint {
    font-size: 12px;
    color: #64748B;
}

.pp-appointments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-appointment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.pp-appointment-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-appointment-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pp-appointment-title {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

.pp-appointment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #64748B;
}

.pp-appointment-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-appointment-status {
    flex-shrink: 0;
}

.pp-appointment-frame {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
}

.pp-appointment-iframe {
    width: 100%;
    height: 520px;
    border: 0;
    display: block;
}


/* Pills + Status */

.pp-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.pp-pill-outline {
    border: 1px solid #E2E8F0;
    color: #475569;
    background: #F8FAFC;
}

.pp-pill-success {
    background: #DCFCE7;
    color: #15803D;
}

.pp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.pp-status-pill svg {
    width: 14px;
    height: 14px;
}

.pp-status-success {
    background: #DCFCE7;
    color: #15803D;
}

.pp-status-warning {
    background: #FEF3C7;
    color: #B45309;
}

.pp-status-muted {
    background: #E2E8F0;
    color: #475569;
}

.pp-status-danger {
    background: #FEE2E2;
    color: #B91C1C;
}


/* Purchases Table */

.pp-table-wrap {
    overflow-x: auto;
}

.pp-table {
    width: 100%;
    border-collapse: collapse;
}

.pp-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748B;
    background: #F8FAFC;
    padding: 12px;
    border-bottom: 1px solid #E2E8F0;
    white-space: nowrap;
}

.pp-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #F1F5F9;
    font-size: 14px;
    color: #1f2937;
    vertical-align: top;
}

.pp-table tr:hover {
    background: #F8FAFC;
}

.pp-purchase-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-purchase-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-purchase-name {
    font-weight: 600;
    color: #0F172A;
}

.pp-purchase-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pp-cell-strong {
    font-weight: 700;
    color: #0F172A;
}

.pp-cell-success {
    font-weight: 700;
    color: #15803D;
}

.pp-cell-muted {
    color: #475569;
}


/* Billing Summary */

.pp-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #DFE9EF;
    background: #F7F7F7;
}

.pp-summary-row.pp-summary-empty {
    border-style: dashed;
    background: #F8FAFC;
}

.pp-summary-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pp-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pp-summary-icon svg {
    width: 20px;
    height: 20px;
}

.pp-icon-gold {
    background: rgba(255, 197, 58, 0.2);
    color: #FFC53A;
}

.pp-icon-muted {
    background: #E2E8F0;
    color: #64748B;
}

.pp-icon-soft {
    background: rgba(255, 197, 58, 0.2);
    color: #FFC53A;
}

.pp-summary-title {
    font-weight: 600;
    color: #0F172A;
}

.pp-summary-subtitle {
    font-size: 13px;
    color: #64748B;
}

#requirements-tab .pp-action-header {
    align-items: center;
    gap: 16px;
}

#requirements-tab .pp-action-progress {
    margin-left: auto;
    min-width: 280px;
    max-width: 360px;
}

#requirements-tab .pp-action-progress .pp-summary-row--header {
    padding: 10px 12px;
    background: rgba(247, 247, 247, 0.92);
}

#requirements-tab .pp-action-progress .pp-summary-info {
    align-items: flex-start;
    gap: 0;
}

#requirements-tab .pp-action-progress strong {
    font-size: 22px;
    line-height: 1;
    color: #0F172A;
    white-space: nowrap;
}

#requirements-tab .pp-steps-section .pp-action-btn {
    min-height: 0;
    height: auto;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
}

#requirements-tab .pp-steps-section .pp-step-card.pp-step-active .pp-action-btn {
    min-height: 0;
    height: auto;
    padding: 7px 14px;
    font-size: 13px;
}

#requirements-tab .pp-steps-section .pp-action-btn.pp-btn-yellow {
    background: #FFC53A;
    border-color: #FFC53A;
    color: #1f211d !important;
}

#requirements-tab .pp-steps-section .pp-action-btn.pp-btn-yellow:hover,
#requirements-tab .pp-steps-section .pp-action-btn.pp-btn-yellow:focus {
    background: #FDC438;
    border-color: #FDC438;
}

#requirements-tab .pp-steps-section .pp-action-btn.pp-btn-outline-dark {
    background: #FFFFFF;
    border-color: #D0D0D0;
    color: #2D2D2D;
}

#requirements-tab .pp-steps-section .pp-action-btn.pp-btn-outline-dark:hover,
#requirements-tab .pp-steps-section .pp-action-btn.pp-btn-outline-dark:focus {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #1f2937;
}

#requirements-tab .pp-steps-section .pp-action-btn.pp-btn-outline-dark[disabled] {
    opacity: 0.65;
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #64748B;
    box-shadow: none;
    transform: none;
}

#requirements-tab .pp-steps-section .pp-badge-locked {
    font-size: 12px;
    padding: 3px 9px;
}

.pp-address-lines {
    margin-top: 4px;
}


/* Empty States */

.pp-empty-state {
    text-align: center;
    padding: 30px 16px;
    color: #64748B;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.pp-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    color: #94A3B8;
}

.pp-empty-icon svg {
    width: 24px;
    height: 24px;
}


/* Transaction List */

.pp-transaction-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-transaction-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
}

.pp-transaction-title {
    font-weight: 600;
    color: #0F172A;
}

.pp-transaction-date {
    font-size: 13px;
    color: #64748B;
}

.pp-transaction-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-transaction-amount {
    font-weight: 700;
    color: #0F172A;
}


/* Responsive Tweaks */

@media (max-width: 1024px) {

    .pp-appointments-grid,
    .pp-appointment-embed-grid {
        grid-template-columns: 1fr;
    }

    .pp-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-summary-row,
    .pp-transaction-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-transaction-right {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {

    .pp-card-header,
    .pp-card-body {
        padding: 16px;
    }

    .pp-action-header,
    .pp-card-section {
        padding: 14px 16px;
    }

    #requirements-tab .pp-action-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #requirements-tab .pp-action-progress {
        margin-left: 0;
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    #requirements-tab .pp-steps-section .pp-action-btn,
    #requirements-tab .pp-steps-section .pp-step-card.pp-step-active .pp-action-btn {
        width: 100%;
        justify-content: center;
    }

    .pp-separator {
        margin: 0 0;
    }

    .pp-card-title {
        font-size: 18px;
    }

    .pp-appointment-iframe {
        height: 440px;
    }

    .pp-appointment-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-appointment-status {
        width: 100%;
    }

    .pp-table th,
    .pp-table td {
        padding: 10px;
    }

    .pp-payment-details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .pp-tab-label {
        display: none;
    }

    #treatments-tab .pp-step-action-block {
        width: 100%;
    }

    .pp-step-action {
        width: 100%;
    }

    #treatments-tab .pp-step-action .pp-btn {
        width: 100%;
    }
}


/* Treatments tab compact refinements */

#treatments-tab .pp-action-header {
    padding: 20px 24px;
}

#treatments-tab .pp-card-section {
    padding: 16px 24px;
}

#treatments-tab .pp-card-section .pp-active-treatment-section {
    padding: 16px 0;
}

#treatments-tab .pp-card-section .pp-available-treatments-section {
    padding: 16px 0;
}

#treatments-tab .pp-section-heading {
    font-size: 19px;
    font-weight: 600;
    color: #1f211d;
    margin-bottom: 10px;
}

#treatments-tab .pp-order-card {
    border-radius: 8px;
    box-shadow: none;
}

#treatments-tab .pp-order-header {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 197, 58, 0.2);
}

#treatments-tab .pp-order-label {
    font-size: 12px;
    letter-spacing: 0.12em;
}

#treatments-tab .pp-order-date {
    font-size: 10px;
}

#treatments-tab .pp-order-status {
    font-size: 12px;
    font-weight: 600;
    color: #1f211d;
    background: rgba(255, 197, 58, 0.2);
    border: 1px solid rgba(255, 197, 58, 0.6);
    padding: 3px 10px;
    border-radius: 999px;
}

#treatments-tab .pp-order-body {
    padding: 12px 14px;
}

#treatments-tab .pp-product-header {
    gap: 10px;
    margin-bottom: 10px;
}

#treatments-tab .pp-product-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

#treatments-tab .pp-product-icon svg {
    width: 14px;
    height: 14px;
}

#treatments-tab .pp-product-name {
    font-size: 13px;
    font-weight: 600;
}

#treatments-tab .pp-product-badges {
    gap: 6px;
}

#treatments-tab .pp-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
}

#treatments-tab .pp-badge-program,
#treatments-tab .pp-badge-plan {
    background: rgba(37, 99, 235, 0.12);
    color: #1D4ED8;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

#treatments-tab .pp-product-price-row {
    height: 26px;
    padding: 0 10px;
    border-radius: 8px;
}

#treatments-tab .pp-price-label {
    font-size: 9px;
    letter-spacing: 0.08em;
}

#treatments-tab .pp-price-value {
    font-size: 13px;
}

#treatments-tab .pp-btn-change,
#treatments-tab .pp-btn-edit {
    height: 26px;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(255, 197, 58, 0.05);
    border-color: rgba(255, 197, 58, 0.6);
}

#treatments-tab .pp-btn-change:hover,
#treatments-tab .pp-btn-edit:hover {
    background: rgba(255, 197, 58, 0.15);
}

#treatments-tab .pp-btn-outline-dark {
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #475569;
    box-shadow: none;
}

#treatments-tab .pp-btn-outline-dark:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

#treatments-tab .pp-included-section {
    margin-top: 12px;
    padding-top: 12px;
}

#treatments-tab .pp-included-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #64748B;
    margin-bottom: 8px;
}

#treatments-tab .pp-included-item {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #475569;
}

#treatments-tab .pp-check-icon {
    width: 12px;
    height: 12px;
}

#treatments-tab .pp-steps-list {
    gap: 8px;
}

#treatments-tab .pp-step-card {
    padding: 12px 14px;
    gap: 12px;
    border-radius: 8px;
}

#treatments-tab .pp-step-card.pp-step-medical {
    padding: 0;
    gap: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    flex-direction: column;
    align-items: stretch;
}

#treatments-tab .pp-step-icon {
    width: 28px;
    height: 28px;
}

#treatments-tab .pp-step-active .pp-step-icon {
    width: 40px;
    height: 40px;
}

#treatments-tab .pp-step-complete .pp-step-icon {
    width: 40px;
    height: 40px;
    background: #22C55E;
    color: #FFFFFF;
}

#treatments-tab .pp-step-complete .pp-step-icon svg {
    width: 20px;
    height: 20px;
}

#treatments-tab .pp-step-active .pp-step-icon svg {
    width: 20px;
    height: 20px;
}

#treatments-tab .pp-step-title {
    font-size: 20px;
    font-weight: 600;
}

#treatments-tab .pp-step-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#treatments-tab .pp-step-title-row .pp-step-status {
    margin-top: 0;
    margin-left: 0;
}

#treatments-tab .pp-step-title-row .pp-step-status.pp-step-badge {
    margin-left: 0;
}

#treatments-tab .pp-step-status.pp-step-badge--success {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

#treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-status.pp-step-badge--success,
#treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active .pp-step-status.pp-step-badge--success {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
    font-weight: 700;
}

#treatments-tab .pp-step-subtitle {
    font-size: 15px;
    color: #64748B;
}

#treatments-tab .pp-step-meta {
    font-size: 13px;
    color: #64748B;
}

#treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-meta .pp-step-meta-detail {
    order: 1;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

#treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-meta .pp-step-meta-note {
    order: 3;
}

#treatments-tab .pp-step-status {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #94A3B8;
}

#treatments-tab .pp-step-action .pp-btn {
    height: auto;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 20px !important;
    background: #FFC53A;
    border-color: #FFC53A;
    color: #1f211d;
    border-radius: 8px;
}

#treatments-tab .pp-step-action .pp-btn[data-portal-action="labs_upload"] {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #1f211d;
}

#treatments-tab .pp-step-action .pp-btn[data-portal-action="labs_upload"]:hover,
#treatments-tab .pp-step-action .pp-btn[data-portal-action="labs_upload"]:focus {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

#treatments-tab .pp-step-action .pp-btn[data-portal-action="labs_upload"] .pp-step-action-text {
    font-size: 16px;
}

#treatments-tab .pp-step-action .pp-btn[data-portal-action="labs_upload"] .pp-step-action-note {
    font-size: 10px !important;
}

#treatments-tab .pp-step-action-block {
    align-items: center;
}

#treatments-tab .pp-step-action-note {
    display: block;
    font-size: 14px;
    color: #64748B;
    letter-spacing: 0.02em;
    margin-top: 4px;
    text-align: center;
}

#treatments-tab .pp-step-active {
    background: rgba(255, 197, 58, 0.08);
    border-color: rgba(255, 197, 58, 0.75);
    border-width: 2px;
}

#treatments-tab .pp-step-active .pp-step-title {
    font-size: 17px;
}

#treatments-tab .pp-step-active .pp-step-subtitle {
    font-size: 15px;
}

#treatments-tab .pp-step-active .pp-step-status {
    font-size: 13px;
}

#treatments-tab .pp-step-active .pp-step-action .pp-btn {
    height: auto;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 32px;
}

#treatments-tab .pp-step-active .pp-step-action-note {
    font-size: 14px;
}

#treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active {
    padding: 22px 24px;
    border-color: #FFC53A;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

#treatments-tab .pp-step-card[data-req-key="consult"] {
    align-items: flex-start;
}

#treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-icon {
    align-self: flex-start;
    margin-top: 4px;
}

#treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active .pp-step-title {
    font-size: 20px;
}

#treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active .pp-step-status {
    color: #B45309;
    font-weight: 700;
}

#treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active .pp-action-btn {
    min-height: 64px;
    padding: 10px 28px !important;
    font-size: 17px;
}

#treatments-tab .pp-step-card[data-req-key="consult"] .pp-action-btn.pp-action-btn--subtle,
#treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active .pp-action-btn.pp-action-btn--subtle {
    min-height: 40px;
    padding: 7px 14px !important;
    font-size: 13px;
    font-weight: 600;
    background: transparent !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    border-radius: 10px;
    box-shadow: none;
}

#treatments-tab .pp-step-card[data-req-key="consult"] .pp-action-btn.pp-action-btn--subtle:hover,
#treatments-tab .pp-step-card[data-req-key="consult"] .pp-action-btn.pp-action-btn--subtle:focus {
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #1E293B !important;
}

#treatments-tab .pp-step-action .pp-btn:hover,
#treatments-tab .pp-step-action .pp-btn:focus {
    background: #FDC438;
    border-color: #FDC438;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 20px !important;
}

#treatments-tab .pp-step-card.pp-step-active[data-req-key="labs"] .pp-action-btn {
    padding: 8px 20px !important;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-content {
    flex: 1 1 420px;
    max-width: 520px;
    padding-right: 16px;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-action-text,
#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-action-note {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px !important;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-action {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin-left: auto;
}

#treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] {
    align-items: flex-start;
}

#treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-step-action {
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-left: auto;
}

#treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-step-action-primary {
    flex: 0 0 auto;
    width: auto;
}

#treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-step-downloads {
    flex-wrap: nowrap;
    width: auto;
}

#treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-step-downloads .pp-btn {
    width: auto;
    white-space: nowrap;
}

#treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-action-btn[data-portal-action="labs_upload"] {
    display: none !important;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-action-primary {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-action-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--icon {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 12px !important;
    min-height: 34px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    align-self: flex-start;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--icon-only {
    padding: 0 !important;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 8px;
    justify-content: center;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--icon-only .pp-step-action-text {
    display: none;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--icon .pp-step-action-text {
    width: auto;
    font-size: 12px !important;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-downloads {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-downloads .pp-btn {
    padding: 6px 12px;
    min-height: 34px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #334155;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-download-btn--results {
    padding: 10px 14px !important;
    min-height: 40px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn.pp-action-btn--icon-only,
#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn.pp-labs-map-btn--icon {
    padding: 0 !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 8px;
    justify-content: center;
    gap: 0;
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #334155;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn.pp-action-btn--icon-only:hover,
#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn.pp-labs-map-btn--icon:hover,
#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn.pp-action-btn--icon-only:focus,
#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn.pp-labs-map-btn--icon:focus {
    background: #E2E8F0;
    border-color: #CBD5E1;
    color: #0F172A;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn.pp-action-btn--icon-only .pp-step-action-text,
#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn.pp-labs-map-btn--icon .pp-step-action-text {
    display: none;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-downloads .pp-btn:hover,
#treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-downloads .pp-btn:focus {
    background: #E2E8F0;
    border-color: #CBD5E1;
    color: #0F172A;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E0F2FE;
    border-color: #38BDF8;
    color: #0F172A;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 24px 10px !important;
    min-height: 44px;
    border-radius: 8px;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn .pp-step-action-text {
    width: auto;
    text-align: left;
    font-size: 16px !important;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--strong {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px 10px !important;
    min-height: 44px;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.2;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--strong .pp-step-action-text {
    width: auto;
    text-align: left;
    font-size: 16px !important;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--strong .pp-action-icon {
    display: none;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--strong.pp-action-btn--print .pp-action-icon {
    display: inline-flex;
    color: #1f211d;
}

#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn:hover,
#treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn:focus {
    background: #BAE6FD;
    border-color: #38BDF8;
    color: #0F172A;
}

@media (max-width: 463px) {
    #treatments-tab .pp-step-card[data-req-key="consult"] {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 10px;
        row-gap: 6px;
        align-items: flex-start;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-icon {
        grid-column: 1;
        grid-row: 1;
        align-self: flex-start;
        justify-self: flex-start;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-content {
        display: contents;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-title-row {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
        gap: 6px;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-subtitle,
    #treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-meta {
        grid-column: 1 / -1;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"] .pp-step-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    #treatments-tab .pp-step-card[data-req-key="labs"] {
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-template-areas:
            "icon content"
            "icon action";
        column-gap: 10px;
        row-gap: 6px;
        align-items: flex-start;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-icon {
        grid-area: icon;
        align-self: center;
        justify-self: center;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-content {
        grid-area: content;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-action {
        grid-area: action;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] {
        align-items: flex-start;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-content {
        flex: 1 1 calc(100% - 44px);
        max-width: none;
        padding-right: 0;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-action {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-left: 0;
        padding-left: 0;
        width: 100%;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-action-primary {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-downloads {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-step-downloads .pp-btn,
    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--strong,
    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-map-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    #treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-step-action {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        justify-content: flex-start;
    }

    #treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-step-action-primary {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: 100%;
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    #treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-step-downloads {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        justify-content: flex-start;
    }

    #treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-step-downloads .pp-btn {
        width: auto;
        white-space: nowrap;
    }

    #treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-labs-download-btn--results {
        min-height: 36px;
        padding: 6px 10px !important;
        font-size: 12px;
        width: auto;
    }

    #treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-labs-map-btn {
        width: 44px;
        min-width: 44px;
    }

    #treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-labs-map-btn.pp-action-btn--icon-only,
    #treatments-tab .pp-step-card.pp-step-complete[data-req-key="labs"] .pp-labs-map-btn.pp-labs-map-btn--icon {
        align-self: center;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--icon {
        margin-left: 0;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-action-btn--icon-only {
        align-self: stretch;
        justify-content: center;
    }

    #treatments-tab .pp-step-card[data-req-key="labs"] .pp-labs-download-btn--results {
        width: 100%;
        min-height: 40px;
        font-size: 13px;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active {
        padding: 20px 18px;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active .pp-step-title {
        font-size: 18px;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active .pp-action-btn {
        width: 100%;
        min-height: 60px;
        padding: 10px 20px !important;
        font-size: 16px;
    }

    #treatments-tab .pp-step-card[data-req-key="consult"].pp-step-active .pp-action-btn.pp-action-btn--subtle {
        width: auto;
        min-height: 38px;
        padding: 7px 12px !important;
        font-size: 12px;
    }
}

#treatments-tab .pp-step-complete .pp-step-title {
    font-size: 14px;
}

#treatments-tab .pp-step-complete .pp-step-subtitle {
    font-size: 12px;
}

#treatments-tab .pp-step-complete .pp-step-status {
    font-size: 10px;
    padding: 3px 10px;
}

#treatments-tab .pp-step-complete .pp-step-action .pp-btn {
    font-size: 12px;
    padding: 0 12px;
}

#treatments-tab .pp-step-locked {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #94A3B8;
}

#treatments-tab .pp-step-locked .pp-step-title,
#treatments-tab .pp-step-locked .pp-step-subtitle {
    color: #94A3B8;
}

#treatments-tab .pp-step-medical-title,
#treatments-tab .pp-step-medical-complete-title p {
    font-size: 17px;
}

#treatments-tab .pp-step-medical-subtitle,
#treatments-tab .pp-step-medical-complete-subtitle {
    font-size: 15px;
}

#treatments-tab .pp-step-medical-time {
    font-size: 14px;
}

#treatments-tab .pp-step-badge,
#treatments-tab .pp-step-mini {
    font-size: 13px;
}

#treatments-tab .pp-badge-locked {
    font-size: 14px;
}

#treatments-tab .pp-step-payment {
    border-style: dashed;
    border-color: #D7E3F0;
}

#treatments-tab .pp-payment-details {
    gap: 8px;
    padding: 0 0 12px;
}

#treatments-tab .pp-payment-box {
    min-height: 64px;
    border-radius: 8px;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
}

#treatments-tab .pp-box-label {
    font-size: 9px;
    letter-spacing: 0.08em;
}

#treatments-tab .pp-box-value {
    font-size: 13px;
}

#treatments-tab .pp-badge-success,
#treatments-tab .pp-badge-pending {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 999px;
}

#treatments-tab .pp-shipping-notice-inner {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
}

#treatments-tab .pp-active-card {
    padding: 14px;
    border-radius: 8px;
    gap: 10px;
}

#treatments-tab .pp-active-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

#treatments-tab .pp-active-name {
    font-size: 14px;
}

#treatments-tab .pp-active-subtitle {
    font-size: 11px;
}

#treatments-tab .pp-active-badge {
    font-size: 9px;
    padding: 2px 8px;
}

#treatments-tab .pp-active-remaining-value {
    font-size: 20px;
}

#treatments-tab .pp-active-remaining-label {
    font-size: 9px;
}

#treatments-tab .pp-active-meta-item {
    padding: 6px 8px;
    min-width: 100px;
}

#treatments-tab .pp-active-meta-label {
    font-size: 9px;
}

#treatments-tab .pp-active-meta-value {
    font-size: 11px;
}

#treatments-tab .pp-progress-track {
    height: 8px;
}

#treatments-tab .pp-active-empty {
    padding: 18px;
}

#treatments-tab .pp-active-empty-title {
    font-size: 14px;
}

#treatments-tab .pp-active-empty-subtitle {
    font-size: 12px;
}

#treatments-tab .pp-available-treatments-section .pp-card-subtitle {
    margin: 0 0 12px;
    font-size: 11px;
    color: #64748B;
}

#treatments-tab .pp-available-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 16px;
}

#treatments-tab .pp-available-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#treatments-tab .pp-filter {
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #1f211d;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#treatments-tab .pp-filter:hover {
    box-shadow: none;
    background: #2D2D2D;
    color: #FFC53A;
}

#treatments-tab .pp-filter.is-active {
    background: #FFC53A;
    border-color: #FFC53A;
    color: #2D2D2D;
}

#treatments-tab .pp-filter:focus-visible {
    outline: 2px solid #FFC53A;
    outline-offset: 2px;
}

#treatments-tab .pp-available-search {
    flex: 1;
    max-width: 260px;
}

#treatments-tab .pp-available-search input {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    color: #1f211d;
    background: #FFFFFF;
}

#treatments-tab .pp-available-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

#treatments-tab .pp-available-viewport {
    flex: 1;
    overflow: hidden;
}

#treatments-tab .pp-carousel-btn {
    width: 25px;
    height: 25px;
    border-radius: 999px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #1f211d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

#treatments-tab .pp-carousel-btn.pp-carousel-prev {
    margin-left: -20px;
}

#treatments-tab .pp-carousel-btn.pp-carousel-next {
    margin-right: -20px;
}

#treatments-tab .pp-carousel-btn:hover:not([disabled]) {
    border-color: #FFC53A;
    color: #2D2D2D;
}

#treatments-tab .pp-carousel-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

#treatments-tab .pp-available-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

#treatments-tab .pp-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    cursor: pointer;
}

#treatments-tab .pp-carousel-dot.is-active {
    background: #FFC53A;
    border-color: #FFC53A;
}

#treatments-tab .pp-available-empty {
    text-align: center;
    color: #64748B;
    font-size: 11px;
    padding: 16px 0;
}

#treatments-tab .pp-available-card.is-hidden {
    display: none;
}

#treatments-tab .pp-available-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1100px) {
    #treatments-tab .pp-available-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #treatments-tab .pp-available-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #treatments-tab .pp-available-controls {
        flex-direction: column;
        align-items: stretch;
    }

    #treatments-tab .pp-available-search {
        max-width: none;
    }

    #treatments-tab .pp-carousel-btn {
        width: 30px;
        height: 30px;
    }

    #treatments-tab .pp-carousel-btn.pp-carousel-prev,
    #treatments-tab .pp-carousel-btn.pp-carousel-next {
        margin-left: 0;
        margin-right: 0;
    }
}

#treatments-tab .pp-available-card {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

#treatments-tab .pp-available-media {
    display: block;
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    overflow: hidden;
}

#treatments-tab .pp-available-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 8px;
}

#treatments-tab .pp-available-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

#treatments-tab .pp-available-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#treatments-tab .pp-available-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #1f211d;
}

#treatments-tab .pp-available-title a {
    color: inherit;
    text-decoration: none;
}

#treatments-tab .pp-available-desc {
    font-size: 13px;
    line-height: 1.45;
    color: #64748B;
    margin: 0;
}

#treatments-tab .pp-available-price {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

#treatments-tab .pp-available-badge {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #EEF2FF;
    color: #4F46E5;
    border: 1px solid rgba(79, 70, 229, 0.2);
    white-space: nowrap;
}

#treatments-tab .pp-available-note {
    font-size: 9px;
    color: #94A3B8;
}

.pp-available-footer {
    display: flex;
    gap: 10px;
}

#treatments-tab .pp-available-footer {
    padding: 0 14px 14px;
}

#treatments-tab .pp-available-footer .pp-btn {
    width: 100%;
    justify-content: center;
}


/* Lab action dropdown */

.pp-action-dropdown {
    position: relative;
    display: inline-flex;
}

.pp-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-dropdown-toggle[disabled],
.pp-dropdown-toggle[disabled]:hover,
.pp-dropdown-toggle[disabled]:focus {
    background: #E2E8F0;
    border-color: #CBD5E1;
    color: #94A3B8;
    box-shadow: none;
    cursor: not-allowed;
}

.pp-dropdown-caret {
    width: 12px;
    height: 12px;
}

.pp-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    display: none;
    z-index: 20;
}

.pp-action-dropdown.is-open .pp-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pp-dropdown-item {
    border: 0;
    background: #FFFFFF;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #1f211d;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.pp-dropdown-item:hover {
    background: #FFF7E6;
}


/* Lab reminder modal */

.pp-reminder-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    width: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    padding: 15px;
    z-index: -1;
    overflow: auto;
}

.pp-reminder-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
    z-index: 999;
}

.pp-reminder-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: none;
}

.pp-reminder-content {
    position: relative;
    width: 100%;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    padding: 20px;
    overflow: auto;
    max-width: 730px;
    margin: auto;
}

.pp-reminder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.pp-reminder-title {
    display: flex;
    gap: 12px;
}

.pp-reminder-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1f211d;
    margin: 0;
}

.pp-reminder-title p {
    font-size: 13px;
    color: #475569;
    margin: 4px 0 0;
}

.pp-reminder-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 197, 58, 0.2);
    color: #FFC53A;
    flex-shrink: 0;
}

.pp-reminder-icon svg {
    width: 20px;
    height: 20px;
}

.pp-reminder-close {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #94A3B8;
    cursor: pointer;
}

.pp-reminder-close:hover {
    color: #64748B;
}

.pp-reminder-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pp-reminder-instructions {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: #1E3A8A;
}

.pp-reminder-instructions h4 {
    font-size: 12px;
    font-weight: 700;
    color: #1E3A8A;
    margin: 0 0 8px 0;
}

.pp-reminder-instructions ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #1E40AF;
}

.pp-reminder-note {
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #92400E;
}

.pp-reminder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pp-consult-slots,
.pp-support-slots {
    margin-top: 12px;
}

.pp-slot-day-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-slot-day-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.pp-slot-day-label {
    min-width: 110px;
    font-size: 12px;
    font-weight: 700;
    color: #1f211d;
    padding-top: 4px;
}

.pp-slot-times {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.pp-consult-slot-grid,
.pp-support-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.pp-consult-slot,
.pp-support-slot {
    border: 1px solid #D1D5DB;
    background: #FFFFFF;
    color: #1f211d !important;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pp-consult-slot:hover,
.pp-support-slot:hover {
    border-color: #2D2D2D;
}

.pp-consult-slot.is-selected,
.pp-support-slot.is-selected {
    background: #2D2D2D !important;
    color: #FFFFFF !important;
    border-color: #2D2D2D !important;
}

.pp-consult-empty,
.pp-consult-loading,
.pp-support-empty,
.pp-support-loading {
    font-size: 12px;
    color: #6B7280;
}

@media (max-width: 640px) {
    .pp-slot-day-row {
        flex-direction: column;
    }

    .pp-slot-day-label {
        min-width: 0;
    }
}

.pp-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-form-group label,
.pp-form-group .pp-form-label {
    font-size: 12px;
    font-weight: 600;
    color: #1f211d;
}

.pp-form-control {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px 14px !important;
    font-size: 12px;
    color: #1f211d;
    background: #FFFFFF;
}

.pp-form-control:focus {
    border-color: rgba(255, 197, 58, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 197, 58, 0.2);
    outline: none;
}

.pp-form-helper {
    font-size: 11px;
    color: #64748B;
    margin: 0;
}

.pp-reminder-error {
    background: #FEE2E2;
    border: 1px solid #FCA5A5;
    color: #991B1B;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 8px;
}

.pp-lab-order-awaiting-notice {
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    color: #92400E;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 0 0 12px;
}

.pp-readonly-field {
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    color: #0f172a;
    font-weight: 600;
}

.pp-readonly-empty {
    color: #94A3B8;
    font-weight: 600;
}

.pp-reminder-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.pp-lab-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pp-lab-upload-card {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.pp-lab-upload-card h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1f211d;
}

.pp-lab-upload-card p {
    margin: 0;
    font-size: 12px;
    color: #475569;
}

#pp-lab-order-modal .pp-lab-upload-card h4 {
    font-size: 16px;
}

#pp-lab-order-modal .pp-lab-upload-card p {
    font-size: 14px;
}

#pp-lab-order-modal .pp-reminder-instructions {
    font-size: 13px;
}

#pp-lab-order-modal .pp-reminder-instructions h4 {
    font-size: 13px;
}

#pp-lab-order-modal .pp-reminder-instructions ul {
    font-size: 13px;
}

#pp-lab-order-modal .pp-lab-provider-hint {
    font-size: 13px;
}

#pp-lab-order-modal .pp-lab-included-banner {
    font-size: 14px;
}

#pp-lab-order-modal .pp-lab-included-badge {
    font-size: 13px;
}

#pp-lab-order-modal .pp-form-group label,
#pp-lab-order-modal .pp-form-group .pp-form-label {
    font-size: 14px;
}

#pp-lab-order-modal .pp-form-control {
    font-size: 14px;
}

#pp-lab-order-modal .pp-form-helper {
    font-size: 13px;
}

#pp-lab-order-modal .pp-lab-upload-summary {
    font-size: 13px;
}

#pp-lab-order-modal .pp-reminder-actions .pp-btn {
    padding: 10px 14px;
}

#pp-lab-upload-modal .pp-reminder-actions .pp-btn {
    padding: 10px 14px;
}

.pp-lab-upload-filelist {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pp-lab-upload-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 6px 0;
}

.pp-lab-upload-summary {
    font-size: 12px;
    color: #475569;
    margin: 0;
}

.pp-lab-included-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ECFDF3;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #166534;
}

.pp-lab-included-banner--missing {
    background: #FEF3C7;
    border-color: #FDE68A;
    color: #92400E;
}

.pp-lab-included-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #DCFCE7;
    color: #166534;
}

.pp-lab-included-badge--missing {
    background: #FDE68A;
    color: #92400E;
}

#pp-lab-order-state {
    width: 100%;
    max-width: 240px;
}

.pp-reminder-confirm {
    display: none;
    text-align: center;
    padding: 12px 0 6px;
}

.pp-reminder-modal.is-confirm .pp-reminder-form {
    display: none;
}

.pp-reminder-modal.is-confirm .pp-reminder-confirm {
    display: block;
}

.pp-reminder-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #DCFCE7;
    color: #16A34A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.pp-reminder-confirm-icon svg {
    width: 26px;
    height: 26px;
}

.pp-reminder-confirm h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1f211d;
    margin-bottom: 6px;
}

.pp-reminder-confirm p {
    font-size: 13px;
    color: #475569;
    margin-bottom: 12px;
}

.pp-reminder-confirm-note {
    font-size: 12px;
    color: #64748B;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .pp-reminder-content {
        padding: 16px;
    }

    .pp-reminder-grid {
        grid-template-columns: 1fr;
    }

    .pp-lab-upload-grid {
        grid-template-columns: 1fr;
    }
}

#treatments-tab .pp-dropdown-toggle {
    height: 28px;
    font-size: 11px;
    padding: 0 10px;
    border-radius: 8px;
}

#treatments-tab .pp-dropdown-menu {
    min-width: 210px;
}

.pp-card--patient {
    border: 2px solid #DFE9EF;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
}

.pp-card-header--patient {
    padding: 24px 24px 12px;
}

.pp-card-title-row--patient {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pp-card-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ============================================
   Payment Method Styles
   ============================================ */


/* Payment Display Container */

.pp-payment-display {
    position: relative;
    min-height: 80px;
}

.pp-payment-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #666;
    font-size: 14px;
}

.pp-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #E8E8E8;
    border-top-color: #FFC53A;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.pp-payment-content {
    display: block;
}

.pp-payment-method-list {
    display: grid;
    gap: 10px;
}

.pp-payment-method-item {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FFFFFF;
}

.pp-payment-method-item.is-default {
    border-color: #FACC15;
    background: #FFFBEB;
}

.pp-payment-method-item__details {
    min-width: 0;
}

.pp-payment-method-item__title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
}

.pp-payment-method-item__meta {
    margin-top: 2px;
    font-size: 12px;
    color: #64748B;
}

.pp-payment-method-item__actions {
    flex-shrink: 0;
}

.pp-payment-method-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 12px;
    font-weight: 700;
}

.pp-payment-method-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #64748B;
}


/* Payment Form Container */

.pp-payment-form-container {
    padding-top: 8px;
}

#pp-payment-form {
    max-width: 100%;
}


/* Form Row for Expiry, CVV, ZIP */

.pp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}


/* Stripe Elements Styling */

.pp-stripe-element {
    padding: 12px 14px;
    border: 1px solid #D0D0D0;
    border-radius: 8px;
    background: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pp-stripe-element:hover {
    border-color: #B0B0B0;
}

.pp-stripe-element:focus-within,
.pp-stripe-element.StripeElement--focus {
    border-color: #FFC53A;
    box-shadow: 0 0 0 3px rgba(255, 197, 58, 0.1);
    outline: none;
}

.pp-stripe-element.StripeElement--invalid {
    border-color: #D35400;
}


/* Card Error Display */

.pp-card-error {
    display: none;
    margin-top: 12px;
    padding: 10px 14px;
    background: #FEF5E7;
    border: 1px solid #F39C12;
    border-radius: 8px;
    color: #D35400;
    font-size: 13px;
    line-height: 1.4;
}

.pp-card-error:not(:empty) {
    display: block;
}


/* Form Actions */

.pp-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #E8E8E8;
}

.pp-form-actions .pp-btn {
    flex: 1;
    max-width: 200px;
}


/* Button Variants */

.pp-btn-outline-dark {
    background: transparent;
    color: #2D2D2D;
    border: 1px solid #D0D0D0;
}

.pp-btn-outline-dark:hover {
    background: #F5F5F5;
    border-color: #B0B0B0;
}

.pp-btn-outline-dark:active {
    background: #E8E8E8;
}


/* Alert Variants */

.pp-alert-success {
    background: #D4EDDA;
    border: 1px solid #C3E6CB;
    color: #155724;
}

.pp-alert-danger {
    background: #F8D7DA;
    border: 1px solid #F5C6CB;
    color: #721C24;
}


/* Responsive Design */

@media (max-width: 768px) {
    .pp-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pp-form-actions {
        flex-direction: column;
    }

    .pp-form-actions .pp-btn {
        max-width: 100%;
    }

    .pp-payment-method-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-payment-method-item__actions {
        width: 100%;
    }

    .pp-payment-method-item__actions .pp-btn {
        width: 100%;
    }
}


/* Loading State for Submit Button */

.pp-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}


/* Utility Classes */

.pp-text-center {
    text-align: center;
}

.pp-text-muted {
    color: #64748B;
}


/* Header Actions */

#pp-payment-header-actions {
    display: flex;
    align-items: center;
}

/* Steps to Complete action emphasis */
.pp-steps-section .pp-step-action-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pp-steps-section .pp-step-title {
    font-size: 18px;
}

.pp-steps-section .pp-step-subtitle {
    font-size: 15px;
    line-height: 1.5;
}

.pp-steps-section .pp-step-status {
    font-size: 14px;
}

.pp-steps-section .pp-step-action-note {
    display: block;
    font-size: 14px;
    color: #64748B;
    letter-spacing: 0.02em;
    margin-top: 4px;
    text-align: center;
}

.pp-steps-section .pp-step-action-text {
    display: block;
    text-align: center;
}

.pp-steps-section .pp-action-btn {
    height: auto;
    min-height: 64px;
    padding: 8px 32px;
    font-size: 16px;
    font-weight: 700;
    background: #FFC53A;
    border-color: #FFC53A;
    color: #1f211d;
}

.pp-steps-section .pp-action-btn[data-portal-action="labs_upload"] {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #1f211d;
}

.pp-steps-section .pp-action-btn[data-portal-action="labs_upload"]:hover,
.pp-steps-section .pp-action-btn[data-portal-action="labs_upload"]:focus {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.pp-steps-section .pp-action-btn[data-portal-action="labs_upload"] .pp-step-action-text {
    font-size: 16px;
}

.pp-steps-section .pp-action-btn[data-portal-action="labs_upload"] .pp-step-action-note {
    font-size: 14px;
}

.pp-steps-section .pp-step-action-block .pp-action-btn {
    flex-direction: column;
    gap: 3px;
    line-height: 1.2;
    padding: 8px 32px;
    height: auto;
    min-height: 64px;
}

.pp-step-card[data-req-key="labs"] .pp-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 8px 32px;
}

.pp-step-card.pp-step-active[data-req-key="labs"] .pp-action-btn {
    padding: 8px 32px;
}

.pp-step-card[data-req-key="labs"] .pp-step-action-text,
.pp-step-card[data-req-key="labs"] .pp-step-action-note {
    display: block;
    width: 100%;
    text-align: center;
}

.pp-steps-section .pp-step-badge,
.pp-steps-section .pp-step-mini {
    font-size: 13px;
}

.pp-steps-section .pp-badge-locked {
    font-size: 14px;
}

.pp-steps-section .pp-step-medical-title,
.pp-steps-section .pp-step-medical-complete-title p {
    font-size: 18px;
}

.pp-steps-section .pp-step-medical-subtitle,
.pp-steps-section .pp-step-medical-complete-subtitle {
    font-size: 15px;
}

.pp-steps-section .pp-step-medical-time {
    font-size: 14px;
}

.pp-steps-section .pp-step-card.pp-step-active {
    padding: 20px 24px;
}

.pp-steps-section .pp-step-card.pp-step-active .pp-action-btn {
    height: auto;
    min-height: 64px;
    padding: 8px 32px;
    font-size: 17px;
}

.pp-steps-section .pp-step-card.pp-step-active .pp-step-action-note {
    font-size: 16px;
}

.pp-steps-section .pp-step-card.pp-step-active .pp-step-action-block .pp-action-btn {
    height: auto;
    min-height: 64px;
    padding: 8px 32px;
}

.pp-steps-section .pp-action-btn:hover,
.pp-steps-section .pp-action-btn:focus {
    background: #FDC438;
    border-color: #FDC438;
}

@media (max-width: 768px) {
    .pp-steps-section .pp-step-title {
        font-size: 18px;
    }

    .pp-steps-section .pp-step-subtitle {
        font-size: 15px;
    }

    .pp-steps-section .pp-step-status {
        font-size: 13px;
    }

    .pp-steps-section .pp-action-btn {
        height: auto;
        min-height: 60px;
        padding: 8px 28px;
        font-size: 16px;
    }

    .pp-steps-section .pp-step-action-note {
        font-size: 14px;
    }

    .pp-steps-section .pp-step-action-block .pp-action-btn {
        min-height: 60px;
        padding: 8px 28px;
    }

    .pp-steps-section .pp-step-card.pp-step-active {
        padding: 18px 18px;
    }

    .pp-steps-section .pp-step-card.pp-step-active .pp-action-btn {
        height: auto;
        min-height: 64px;
        padding: 8px 20px !important;
        font-size: 17px;
    }

    .pp-steps-section .pp-step-card.pp-step-active .pp-step-action-note {
        font-size: 15px;
    }

    .pp-steps-section .pp-step-card.pp-step-active .pp-step-action-block .pp-action-btn {
        min-height: 64px;
        padding: 8px 20px !important;
    }

    .pp-step-card[data-req-key="labs"] .pp-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pp-step-card.pp-step-active[data-req-key="labs"] .pp-action-btn {
        min-height: 64px;
        padding: 8px 20px !important;
    }

    .pp-step-card[data-req-key="labs"] .pp-step-action-text,
    .pp-step-card[data-req-key="labs"] .pp-step-action-note {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   Help & Support Tab Styles
   ============================================ */
.pp-support-banner-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

.pp-support-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 197, 58, 0.1);
    color: #FFC53A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pp-support-icon svg {
    width: 28px;
    height: 28px;
}

.pp-support-text {
    flex: 1;
}

.pp-support-text h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.pp-support-text p {
    font-size: 14px;
    color: #9CA3AF;
    margin: 0;
}

.pp-support-action .pp-btn {
    white-space: nowrap;
}

/* Sub Navigation Pills */
.pp-sub-nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pp-sub-nav-item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-sub-nav-item:hover {
    background: #F9FAFB;
    color: #111827;
    border-color: #D1D5DB;
}

.pp-sub-nav-item.active {
    background: #FFC53A;
    color: #2D2D2D;
    border-color: #FFC53A;
}

.pp-open-support-call {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.pp-open-support-call .pp-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pp-open-support-call .pp-btn-icon svg {
    display: block;
}

/* Sub Tab Content */
.pp-sub-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.pp-sub-tab-content.active {
    display: block;
}

/* Video Grid */
.pp-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.pp-video-card {
    background: #FAFAFA;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pp-video-card:hover {
    border-color: #FFC53A;
    transform: translateY(-2px);
}

.pp-video-preview {
    background: #E5E5E5;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
}

.pp-video-info {
    padding: 16px;
}

.pp-video-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 4px 0;
}

.pp-video-info p {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
}

/* FAQ Accordion */
.pp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-faq-item {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
}

.pp-faq-item summary {
    padding: 16px 20px;
    font-weight: 600;
    color: #2D2D2D;
    cursor: pointer;
    list-style: none;
    /* Hide default triangle */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pp-faq-item summary::-webkit-details-marker {
    display: none;
}

.pp-faq-item summary::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.pp-faq-item[open] summary::after {
    content: '';
    transform: rotate(180deg);
}

.pp-faq-content {
    padding: 0 20px 20px;
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
    border-top: 1px solid #F3F4F6;
    margin-top: 0;
    padding-top: 16px;
}

/* Injection Guide Specific Layout */
.pp-injection-guide-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.pp-card.pp-guide-card {
    padding: 20px;
}

.pp-guide-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Video Placeholders */
.pp-guide-video-placeholder {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.pp-guide-video-placeholder video {
    border-radius: 8px;
}

.pp-video-embed {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.pp-video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.pp-guide-play-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 197, 58, 0.1);
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFC53A;
}

.pp-guide-play-icon svg {
    width: 24px;
    height: 24px;
}

.pp-guide-video-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 4px 0;
}

.pp-guide-video-content p {
    font-size: 13px;
    color: #9CA3AF;
    margin: 0;
}

/* Safety Box */
.pp-guide-safety-box {
    background: #FFFBEB;
    border: 1px solid #FEF3C7;
    border-radius: 8px;
    padding: 20px;
}

.pp-safety-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #D97706;
}

.pp-safety-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #92400E;
}

.pp-safety-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #4B5563;
    line-height: 1.6;
}

.pp-safety-list li+li {
    margin-top: 6px;
}

/* Steps List */
.pp-guide-step-item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}

.pp-guide-step-item:last-child {
    margin-bottom: 0;
}

.pp-step-number {
    width: 28px;
    height: 28px;
    background: #2D2D2D;
    color: #FFFFFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.pp-step-content {
    flex: 1;
}

.pp-step-content h4 {
    font-size: 14px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 2px 0;
}

.pp-step-content p {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   Never Miss a Dose Tab Styles
   ============================================ */

/* Reminder Cards Grid */
.pp-reminders-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.pp-reminder-info-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pp-reminder-icon-circle {
    width: 50px;
    height: 50px;
    background: rgba(255, 197, 58, 0.1);
    color: #FFC53A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.pp-reminder-icon-circle svg {
    width: 24px;
    height: 24px;
}

.pp-reminder-info-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 5px 0;
}

.pp-reminder-info-card p {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
}

/* Storage Best Practices */
.pp-storage-section {
    margin-bottom: 30px;
}

.pp-section-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 15px 0;
}

.pp-storage-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pp-storage-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #4B5563;
}

.pp-storage-list li::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC53A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.pp-storage-list li strong {
    color: #2D2D2D;
    font-weight: 600;
    min-width: 90px;
}

/* Missed Dose Box */
.pp-missed-dose-box {
    background: #F0F9FF;
    /* Light blue tint similar to design */
    border: 1px solid #BAE6FD;
    border-radius: 8px;
    padding: 24px;
}

.pp-box-title {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 15px 0;
}

.pp-missed-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-missed-row {
    display: flex;
    gap: 20px;
    font-size: 14px;
}

.pp-missed-label {
    min-width: 80px;
    font-weight: 700;
    color: #334155;
}

.pp-missed-val {
    color: #64748B;
}

@media (max-width: 900px) {
    .pp-injection-guide-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pp-reminders-grid {
        grid-template-columns: 1fr;
    }

    .pp-support-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .pp-sub-nav {
        flex-direction: column;
        gap: 8px;
    }

    .pp-sub-nav-item {
        width: 100%;
        text-align: center;
    }

    .pp-support-icon {
        width: 50px;
        height: 50px;
    }

    .pp-support-icon svg {
        width: 25px;
        height: 25px;
    }
}

/* Final payment card enhancements */
.pp-step-card[data-req-key="final_payment"] .pp-step-title {
    order: 1;
}

.pp-step-card[data-req-key="final_payment"] .pp-step-title-row .pp-step-status {
    order: 2;
}

.pp-step-card[data-req-key="final_payment"] .pp-final-header-paid {
    order: 3;
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    min-width: 110px;
}

.pp-step-card[data-req-key="final_payment"] .pp-final-header-paid__label {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748B;
    line-height: 1;
}

.pp-step-card[data-req-key="final_payment"] .pp-final-header-paid__value {
    font-size: 14px;
    line-height: 1.2;
    color: #0F172A;
}

.pp-step-card[data-req-key="final_payment"] .pp-step-action {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.pp-step-card[data-req-key="final_payment"] .pp-final-due-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #FCD34D;
    background: #FFFBEB;
    color: #92400E;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.pp-step-card[data-req-key="final_payment"] .pp-step-action .pp-btn.pp-action-hidden + .pp-final-due-inline {
    display: none;
}

.pp-step-card[data-req-key="final_payment"] .pp-final-due-inline strong {
    font-size: 13px;
    color: #7C2D12;
}

.pp-step-card[data-req-key="final_payment"] .pp-step-action-note {
    align-self: flex-end;
    text-align: right;
}

.pp-step-card[data-req-key="final_payment"] .pp-payment-details #pp-final-payment-boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.pp-step-card[data-req-key="final_payment"] #pp-final-payment-boxes .pp-payment-box {
    min-height: 98px;
    height: auto;
    justify-content: flex-start;
    gap: 6px;
    padding: 12px;
}

.pp-step-card[data-req-key="final_payment"] #pp-final-payment-boxes .pp-box-value {
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.pp-step-card[data-req-key="final_payment"] #pp-final-payment-boxes .pp-badge-success,
.pp-step-card[data-req-key="final_payment"] #pp-final-payment-boxes .pp-badge-pending {
    position: static;
    margin-top: auto;
    align-self: flex-start;
    white-space: nowrap;
}

.pp-step-card[data-req-key="final_payment"] .pp-final-payment-hint {
    margin: 12px 0 0;
    border: 1px solid #FDE68A;
    background: #FFFBEB;
    border-radius: 10px;
    padding: 10px 12px;
    color: #92400E;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.pp-final-shipping-panel {
    width: 100%;
    border: 1px solid #FACC15;
    background: #FFFBEB;
    border-radius: 10px;
    padding: 12px 14px;
    color: #1F2937;
}

.pp-final-shipping-panel__status-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-final-shipping-panel__status-row svg {
    color: #D97706;
}

.pp-final-shipping-panel__message {
    margin: 8px 0 0;
    color: #374151;
}

.pp-final-shipping-panel__meta {
    margin: 8px 0 0;
    color: #4B5563;
    font-size: 13px;
}

.pp-final-shipping-panel__meta a {
    color: #1D4ED8;
    font-weight: 600;
}

.pp-final-shipping-panel.is-in-transit {
    border-color: #93C5FD;
    background: #EFF6FF;
}

.pp-final-shipping-panel.is-in-transit .pp-final-shipping-panel__status-row svg {
    color: #2563EB;
}

.pp-final-shipping-panel.is-delivered {
    border-color: #86EFAC;
    background: #F0FDF4;
}

.pp-final-shipping-panel.is-delivered .pp-final-shipping-panel__status-row svg {
    color: #16A34A;
}

.pp-final-shipping-panel.is-issue {
    border-color: #FCA5A5;
    background: #FEF2F2;
}

.pp-final-shipping-panel.is-issue .pp-final-shipping-panel__status-row svg {
    color: #DC2626;
}

.pp-final-shipping-panel.is-locked {
    border-color: #E2E8F0;
    background: #F8FAFC;
}

.pp-final-shipping-panel.is-locked .pp-final-shipping-panel__status-row svg {
    color: #94A3B8;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-header-paid {
    min-width: 96px;
    padding: 4px 7px;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-header-paid__label {
    font-size: 9px;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-header-paid__value {
    font-size: 12px;
}

#treatments-tab .pp-payment-details #pp-final-payment-boxes {
    gap: 8px;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-due-inline {
    font-size: 11px;
    padding: 5px 8px;
}

#treatments-tab .pp-final-shipping-panel {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-payment-details {
    gap: 12px;
    padding: 6px 6px 16px;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-shipping-panel {
    border-radius: 10px;
    padding: 14px 16px;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-shipping-panel__status-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] #pp-final-shipping-status {
    color: #0F172A;
    font-size: 15px;
    line-height: 1.3;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-shipping-panel__message {
    margin-top: 10px;
    color: #334155;
    font-size: 14px;
    line-height: 1.55;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-shipping-panel__meta {
    margin-top: 10px;
    font-size: 13px;
    color: #475569;
}

#treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-payment-hint {
    margin-top: 14px;
    padding: 12px 14px;
    color: #1F2937;
    background: #FEF3C7;
    border-color: #FCD34D;
}

@media (max-width: 900px) {
    .pp-step-card[data-req-key="final_payment"] .pp-final-header-paid {
        margin-left: 0;
    }

    .pp-step-card[data-req-key="final_payment"] .pp-step-action {
        align-items: flex-start;
        width: 100%;
    }

    .pp-step-card[data-req-key="final_payment"] .pp-step-action-note {
        align-self: flex-start;
        text-align: left;
    }

    .pp-step-card[data-req-key="final_payment"] .pp-payment-details #pp-final-payment-boxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pp-step-card[data-req-key="final_payment"] .pp-step-title-row {
        row-gap: 6px;
    }

    .pp-step-card[data-req-key="final_payment"] .pp-final-header-paid {
        width: 100%;
        align-items: flex-start;
    }

    .pp-step-card[data-req-key="final_payment"] .pp-final-due-inline {
        width: 100%;
        justify-content: space-between;
    }

    .pp-step-card[data-req-key="final_payment"] .pp-payment-details #pp-final-payment-boxes {
        grid-template-columns: 1fr;
    }

    #treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-payment-details {
        padding: 4px 2px 14px;
    }

    #treatments-tab .pp-step-card[data-req-key="final_payment"] .pp-final-shipping-panel {
        padding: 12px 13px;
    }
}