/* ==========================================================================
   Redesign_Members.css
   Consolidated styles for member pages
   ========================================================================== */

/* ==========================================================================
   Registered charity picker (controls/CharityPicker.ascx)
   Styled to match the MDB wizard look. No transforms on hover/focus of
   interactive elements (avoids the known first-click-drop bug).
   ========================================================================== */
.charity-picker [hidden] { display: none !important; }

.charity-picker .cp-search-wrap { position: relative; }
.charity-picker .cp-search { padding-right: 2.5rem; }
.charity-picker .cp-search-wrap .cp-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #006E7B;
    cursor: pointer;
}
.charity-picker .cp-search-wrap .cp-toggle:hover { color: #008AA0; }
.charity-picker .cp-search-wrap .cp-toggle:focus-visible { outline: 2px solid #008AA0; outline-offset: -2px; }

.charity-picker .cp-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1065;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #008AA0;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(60, 60, 59, .175);
}

.charity-picker .cp-option {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .85rem;
    cursor: pointer;
    border-bottom: 1px solid #eceaea;
}
.charity-picker .cp-option:last-child { border-bottom: 0; }

.charity-picker .cp-option:hover,
.charity-picker .cp-option.cp-active {
    background-color: rgba(0, 138, 160, .12);
}

.charity-picker .cp-opt-name { color: #3C3C3B; font-weight: 600; line-height: 1.25; }
.charity-picker .cp-opt-meta { color: #4D5149; font-size: .8125rem; }

.charity-picker .cp-confirm {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background-color: rgba(0, 138, 160, .07);
    border: 1px solid #008AA0;
    border-radius: .375rem;
}
.charity-picker .cp-confirm-name { color: #006E7B; }
.charity-picker .cp-confirm-meta { color: #4D5149; }

.charity-picker .cp-change,
.charity-picker .cp-manual-toggle,
.charity-picker .cp-manual-cancel {
    color: #006E7B;
    text-decoration: underline;
    white-space: nowrap;
}
.charity-picker .cp-change:hover,
.charity-picker .cp-manual-toggle:hover,
.charity-picker .cp-manual-cancel:hover { color: #008AA0; }

.charity-picker .cp-search:focus-visible,
.charity-picker .cp-change:focus-visible,
.charity-picker .cp-manual-toggle:focus-visible,
.charity-picker .cp-manual-cancel:focus-visible {
    outline: 2px solid #008AA0;
    outline-offset: 2px;
}

.charity-picker .cp-manual-toggle-wrap { margin-top: .5rem; }
.charity-picker .cp-manual { margin-top: .75rem; }

/* ==========================================================================
   Hero Section Styles
   ========================================================================== */
.hero-section .hero-background {
    position: relative;
}

.hero-section .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.hero-section .card-body {
    z-index: 2;
}

/* MyMessages Add-specific hero styling */
.members-mymessages-add .hero-section .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* MyMessages Modify-specific hero styling */
.members-mymessages-modify .hero-section .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* MyMessages Delete-specific hero styling */
.members-mymessages-delete .hero-section .card-body {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
}

/* MyMessages No Space-specific hero styling */
.members-mymessages-nospace .hero-section .card-body {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
}

/* MyVault Modify-specific hero styling */
.members-myvault-modify .hero-section .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6);
    line-height: 1.2;
}

.hero-title i {
    color: #008AA0;
    filter: drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* Delete page specific hero icon color */
.members-mymessages-delete .hero-title i {
    color: #dc3545 !important;
}

/* No Space page specific hero icon color */
.members-mymessages-nospace .hero-title i {
    color: #ffc107 !important;
}

.hero-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #2c3e50;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.5);
}

.hero-description {
    font-size: 1.125rem;
    font-weight: 400;
    color: #1a1a1a;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.4);
    line-height: 1.5;
}

/* Do not put this back to 600 at 0.95rem. In Poppins the dot on a lowercase "i"
   clears its stem by only ~1px, and at 0.95rem (15.2px) the two fuse into a solid
   bar on a 1x display, so "Timed Delivery" reads as "TImed DelIvery". 500 at 1rem
   keeps a clear pixel row between them; the gap is size-sensitive rather than
   steadily improving with size, so re-check the glyph if you change either value.
   text-shadow and backdrop-filter were dropped as well: the white shadow was
   invisible over the near-white pill and the blur had only a flat colour behind
   it, so both cost a composited layer and softer text for no visible gain. */
.hero-features .feature-item {
    display: flex;
    align-items: center;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.92);
    padding: 12px 16px;
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hero-features .feature-item i {
    color: #008AA0;
    font-size: 1rem;
    filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.6));
}

.hero-icon i {
    font-size: 4rem;
    color: #008AA0;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
    opacity: 0.9;
}

/* ==========================================================================
   Shared File Upload and Drag & Drop Styles
   ========================================================================== */
/* Keyframe animations used by both MyMessages and MyVault */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Character counter styling - shared by both pages */
.character-counter {
    font-size: 0.875rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease-in-out;
}

.character-counter input[readonly] {
    background: transparent !important;
    border: none !important;
    font-size: inherit;
    color: inherit;
    padding: 0;
    width: auto;
    min-width: 3rem;
    text-align: center;
}

/* Enhanced file upload section - shared styling */
.file-upload-section {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.file-upload-section:hover {
    border-color: #008AA0;
    background-color: rgba(0, 138, 160, 0.05);
}

.file-upload-section.drag-over {
    border-color: #008AA0;
    background-color: rgba(0, 138, 160, 0.1);
    transform: scale(1.02);
}

.file-upload-section .upload-error {
    margin-top: 15px;
    text-align: left;
}

.file-upload-section .file-info {
    animation: fadeInUp 0.3s ease-out;
}

.upload-error {
    animation: shake 0.5s ease-in-out;
}

.file-upload-section .btn {
    pointer-events: auto;
}

.file-upload-input {
    cursor: pointer !important;
}

/* File info display during upload process */
.file-info {
    border: 1px solid #e9ecef !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    animation: fadeIn 0.3s ease;
}

/* Attachment preview area */
.attachment-preview {
    max-height: 400px;
    overflow-y: auto;
}

/* ==========================================================================
   MyMessages Add Page Specific Styles
   ========================================================================== */
/* Adjust character counter for MyMessages (smaller font for longer messages) */
.members-mymessages-add .character-counter {
    font-size: 0.75rem;
}

/* Alternative file upload styling for MyMessages */
.members-mymessages-add .file-upload-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 2rem 1.5rem;
}

.members-mymessages-add .file-upload-section.drag-over {
    border-color: #198754;
    background-color: rgba(25, 135, 84, 0.1);
}

/* ==========================================================================
   MyMessages Modify Page Specific Styles
   ========================================================================== */
/* Adjust character counter for MyMessages Modify (smaller font for longer messages) */
.members-mymessages-modify .character-counter {
    font-size: 0.75rem;
}

/* Alternative file upload styling for MyMessages Modify */
.members-mymessages-modify .file-upload-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 2rem 1.5rem;
}

.members-mymessages-modify .file-upload-section.drag-over {
    border-color: #198754;
    background-color: rgba(25, 135, 84, 0.1);
}

/* Enhanced card borders for MyMessages Modify */
.members-mymessages-modify .card.shadow-sm {
    border: 1px solid #adb5bd !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   MyVault Modify Page Specific Styles
   ========================================================================== */
/* MyVault Modify uses standard character counter size for shorter notes */
.members-myvault-modify .character-counter {
    font-size: 0.875rem;
}

/* Alternative file upload styling for MyVault Modify */
.members-myvault-modify .file-upload-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 2rem 1.5rem;
}

.members-myvault-modify .file-upload-section:hover {
    border-color: #6610f2;
    background-color: rgba(102, 16, 242, 0.05);
}

.members-myvault-modify .file-upload-section.drag-over {
    border-color: #6610f2;
    background-color: rgba(102, 16, 242, 0.1);
}

/* Enhanced card borders for MyVault Modify */
.members-myvault-modify .card.shadow-sm {
    border: 1px solid #adb5bd !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* MyVault specific card header styling */
.members-myvault-modify .card-header {
    background: linear-gradient(135deg, #6610f2, #520dc2) !important;
    border-bottom: none;
}

/* MyVault specific icon colors */
.members-myvault-modify .text-primary {
    color: #6610f2 !important;
}

.members-myvault-modify .hero-title i,
.members-myvault-modify .hero-features .feature-item i,
.members-myvault-modify .hero-icon i {
    color: #6610f2 !important;
    filter: drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.members-myvault-modify .breadcrumb-modern .breadcrumb-item a,
.members-myvault-modify .breadcrumb-modern .breadcrumb-item.active {
    color: #6610f2 !important;
}

.members-myvault-modify .form-floating > .form-control:focus {
    border-color: #6610f2 !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.25) !important;
}

.members-myvault-modify .form-text i {
    color: #6610f2 !important;
}

/* File wrapper (legacy support) */
.file-upload-wrapper {
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.file-upload-wrapper:hover {
    border-color: #008AA0;
    background-color: rgba(0, 138, 160, 0.05);
}

.file-upload-wrapper.file-upload-drag-over {
    border-color: #198754 !important;
    background-color: rgba(25, 135, 84, 0.1) !important;
    transform: scale(1.01);
}

/* ==========================================================================
   MyVault Add Page Specific Styles
   ========================================================================== */
/* MyVault uses slightly more padding */
.members-myvault-add .file-upload-section {
    padding: 2rem;
}

/* Card styling for MyVault add page */
.members-myvault-add .hero-section .card {
    border-radius: 0.75rem;
    overflow: hidden;
}

.members-myvault-add .card {
    border-radius: 0.5rem;
}

.members-myvault-add .card-header {
    border-bottom: none;
    background: linear-gradient(135deg, #008AA0, #006a7a) !important;
}

/* ==========================================================================
   Breadcrumb Styling (Shared)
   ========================================================================== */
.breadcrumb-modern {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-modern .breadcrumb {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.breadcrumb-modern .breadcrumb-item {
    color: #6c757d;
}

.breadcrumb-modern .breadcrumb-item.active {
    color: #008AA0;
    font-weight: 600;
}

.breadcrumb-modern .breadcrumb-item a {
    color: #008AA0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-modern .breadcrumb-item a:hover {
    color: #006B7D;
    text-decoration: underline;
}

/* Alternative breadcrumb styling */
.breadcrumb-modern {
    background: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

/* Enhanced floating form labels */
.form-floating > .form-control {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem;
    border: 1px solid #ced4da;
}

.form-floating > .form-control:focus {
    border-color: #008AA0;
    box-shadow: 0 0 0 0.2rem rgba(0, 138, 160, 0.25);
}

.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    color: #6c757d;
    font-weight: 400;
    opacity: 1;
    transform: scale(1) translateY(0) translateX(0);
}

.form-floating > .form-control[readonly] ~ label,
.form-floating > .form-control[disabled] ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: #6c757d;
    font-weight: 500;
}

.form-floating > textarea.form-control {
    min-height: 120px;
    resize: vertical;
    padding-top: 1rem;
}

.form-floating > textarea.pw-textarea {
    min-height: 400px;
}

.form-floating > textarea.form-control ~ label {
    height: auto;
    padding-top: 1rem;
}

.form-floating > label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.25rem;
    right: -0.25rem;
    height: 0.125rem;
    background: white;
    z-index: -1;
}

/* Form text and spacing */
.form-text {
    font-size: 0.75rem;
    color: #6c757d;
    line-height: 1.4;
    margin-top: 0.375rem;
}

.form-text i {
    color: #008AA0;
    opacity: 0.8;
    margin-right: 0.25rem;
}

.form-text strong {
    color: #495057;
}

.form-floating + .form-text {
    margin-top: 0.5rem;
}

.form-text + .character-counter {
    margin-top: 0.5rem;
}

/* Tighter line spacing for multi-line field hints (bulk reference code generator).
   .form-text is inline in this MDB build, so line-height on the inline <small> does not control
   the spacing of its wrapped lines (the containing block's line-height does). Making it block lets
   the element's own line-height apply. Scoped via the extra class so only these hints are affected. */
.form-text.pw-fieldhint {
    display: block;
    line-height: 1.2;
}

/* Enhanced button styles */
.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-info:hover,
.btn-outline-secondary:hover {
    transform: translateY(-1px);
}

/* Enhanced form validation */
.form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
    background: #fff;
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
    padding: 0.5rem;
    position: relative;
}

.invalid-feedback::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 15px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #dc3545;
}

.invalid-feedback::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
}

.form-floating > .form-control.is-invalid ~ label {
    color: #dc3545;
}

.form-floating > .form-control.is-valid ~ label {
    color: #198754;
}

.invalid-feedback {
    animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced card borders for MyMessages */
.members-mymessages-add .card.shadow-sm {
    border: 1px solid #adb5bd !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* GridView and table enhancements */
.table-hover tbody tr:hover {
    background-color: rgba(0, 138, 160, 0.05);
}

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

/* Alert animations */
.alert {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Storage Components
   ========================================================================== */
.storage-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.storage-progress {
    height: 12px;
    background: #f8f9fa;
    border-radius: 20px;
    overflow: hidden;
    margin: 1rem 0;
    border: 1px solid #e9ecef;
}

.storage-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #008AA0, #006B7D);
    border-radius: 20px;
    transition: width 0.5s ease;
}

/* ==========================================================================
   File Icons and Visual Elements
   ========================================================================== */
.file-icon {
    width: 40px;
    height: 40px;
    background: #008AA0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Enhanced Spacing System
   ========================================================================== */
.mb-6 {
    margin-bottom: 4rem !important;
}

.extra-section-spacing {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

/* Specific section spacing */
#pnlMessagesForm > .card:not(:last-child),
#pnlVaultForm > .card:not(:last-child) {
    margin-bottom: 3rem !important;
}

#pnlMessagesForm > .alert,
#pnlVaultForm > .alert {
    margin-bottom: 3rem !important;
}

#pnlTellMeMoreNotWL {
    margin-bottom: 3rem !important;
}

/* ==========================================================================
   Button Stabilization System
   ========================================================================== */
.action-buttons-wrapper {
    position: relative;
    min-height: 60px;
}

.button-container {
    position: relative;
    height: auto;
    min-height: 48px;
}

.stable-button {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 2px solid transparent !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: none !important;
    transform: none !important;
    backface-visibility: visible !important;
    will-change: auto !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.stable-button:hover,
.stable-button:active,
.stable-button:visited {
    transform: none !important;
    text-decoration: none !important;
}

.stable-button:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    transform: none !important;
}

/* LinkButton fixes */
.btn.linkbutton-fix {
    display: inline-block !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: none !important;
    transform: none !important;
}

.btn.linkbutton-fix:hover,
.btn.linkbutton-fix:active,
.btn.linkbutton-fix:focus,
.btn.linkbutton-fix:visited {
    text-decoration: none !important;
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Prevent layout shift */
.action-buttons-wrapper .row {
    margin: 0 !important;
}

.action-buttons-wrapper .col-md-6 {
    padding: 0 15px !important;
}

.card-footer .btn {
    min-width: auto !important;
    white-space: nowrap !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

.card-footer .btn:active {
    transform: none !important;
}

/* ==========================================================================
   Card Grid System
   ========================================================================== */
.card.h-100 {
    display: flex;
    flex-direction: column;
}

.card.h-100 .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card.h-100 .card-footer {
    margin-top: auto;
}

.min-w-0 {
    min-width: 0;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.card .row.g-2 {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
}

/* Content preview areas */
.message-preview,
.note-preview {
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.3;
}

/* ==========================================================================
   Form Components (primarily for MyMessages)
   ========================================================================== */
/* ASP.NET Checkbox fix for MDBootstrap conflicts */
.mymessages_form .form-check span {
    display: contents !important;
    position: static !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.mymessages_form .form-check span::before,
.mymessages_form .form-check span::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    position: static !important;
}

.mymessages_form .form-check input[type="hidden"] {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
}

.mymessages_form .form-check input[type="checkbox"] {
    display: none !important;
}

.mymessages_form .form-check input[type="checkbox"].form-check-input {
    display: inline-block !important;
    position: relative !important;
    width: 1rem !important;
    height: 1rem !important;
    margin-right: 0.375rem !important;
    vertical-align: top !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    print-color-adjust: exact !important;
    float: none !important;
}

.mymessages_form .form-check input[type="checkbox"].form-check-input::before,
.mymessages_form .form-check input[type="checkbox"].form-check-input::after {
    display: none !important;
    content: none !important;
}

.mymessages_form .form-check input[type="checkbox"].form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

.mymessages_form .form-check input[type="checkbox"].form-check-input:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.mymessages_form .form-check input[type="checkbox"].form-check-input:disabled {
    pointer-events: none !important;
    filter: none !important;
    opacity: 0.5 !important;
}

.mymessages_form .form-check .form-check-label {
    cursor: pointer !important;
    line-height: 1.5 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: inline !important;
    vertical-align: top !important;
}

.mymessages_form .form-check {
    display: block !important;
    min-height: 1.5rem !important;
    padding-left: 0 !important;
    margin-bottom: 0.125rem !important;
    margin-left: 0 !important;
    text-align: left !important;
}

.mymessages_form .form-check span[class*="form-check"],
.mymessages_form .form-check span[class*="checkbox"] {
    background: none !important;
    border: none !important;
    position: static !important;
    display: contents !important;
}

.mymessages_form .card-body .form-check {
    margin-left: 24px !important;
    padding-left: 0 !important;
    position: relative !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (min-width: 768px) {
    .card-footer .btn-sm {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2rem;
        text-align: center;
    }
    
    .hero-subtitle,
    .hero-description {
        text-align: center;
    }
    
    .hero-features .row {
        justify-content: center;
    }
    
    .hero-icon i {
        font-size: 3rem;
        margin-top: 1rem;
    }
    
    .mb-6 {
        margin-bottom: 3rem !important;
    }
}

@media (max-width: 768px) {
    .hero-section .card-body {
        padding: 2rem 1.5rem !important;
    }
    
    .file-upload-section {
        padding: 1.5rem 1rem;
    }
    
    .members-myvault-add .file-upload-section {
        padding: 1.5rem 1rem;
    }
    
    .members-mymessages-add .file-upload-section {
        padding: 1.5rem 1rem;
    }
    
    .members-mymessages-modify .file-upload-section {
        padding: 1.5rem 1rem;
    }
    
    .members-myvault-modify .file-upload-section {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    /* font-size is deliberately NOT reduced here. The base rule pairs weight 500 with 1rem because
       that is the combination that keeps the dot on a lowercase "i" clear of its stem in Poppins.
       Overriding the size to 0.9rem (14.4px) while leaving the weight at 500 recreated the
       "TImed DelIvery" collision this rule was changed to fix - at a SMALLER size than the 0.95rem
       that caused it, and on the viewport where most members read these pages. The base comment
       warns the gap is size-sensitive rather than steadily improving with size, so the pair has to
       travel together. The labels are short ("Secure Storage", "Keyholder Access", "Fully
       Encrypted", "Timed Delivery") and each sits in a full-width column below 576px, so keeping
       1rem does not wrap. Only the padding is tightened for small screens. */
    .hero-features .feature-item {
        padding: 10px 14px;
    }
    
    .mb-6 {
        margin-bottom: 2.5rem !important;
    }
    
    .breadcrumb-modern {
        font-size: 0.875rem;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .hero-section .card-body {
        padding: 1.5rem 1rem !important;
    }
    
    /* Single column layout on mobile */
    .card .row.g-2 .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .card .row.g-2 .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .card-footer .d-flex {
        flex-direction: column;
    }
    
    /* Smaller file icon on mobile */
    .file-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

/* ==========================================================================
   MyMessages No Space Page Specific Styles
   ========================================================================== */

/* Storage info items styling */
.members-mymessages-nospace .storage-info-item {
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.members-mymessages-nospace .storage-info-item:hover {
    transform: translateX(5px);
}

/* Option cards styling */
.members-mymessages-nospace .option-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.members-mymessages-nospace .option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 138, 160, 0.1), transparent);
    transition: left 0.5s ease;
}

.members-mymessages-nospace .option-card:hover::before {
    left: 100%;
}

/* Storage progress bar for no space page */
.members-mymessages-nospace .storage-progress {
    height: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 0;
    border: 2px solid #e9ecef;
    position: relative;
}

.members-mymessages-nospace .storage-progress-bar {
    height: 100%;
    border-radius: 10px;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.members-mymessages-nospace .storage-progress-full {
    background: linear-gradient(90deg, #dc3545, #c82333) !important;
    animation: dangerPulse 2s ease-in-out infinite;
}

@keyframes dangerPulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% { 
        opacity: 0.9;
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.3);
    }
}

/* Enhanced card borders for MyMessages No Space */
.members-mymessages-nospace .card.shadow-sm {
    border: 1px solid #adb5bd !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Warning card specific styling - Fixed to prevent readability issues */
.members-mymessages-nospace .card.border-warning {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3), 0 0 20px rgba(255, 193, 7, 0.2) !important;
    position: relative;
}

/* Storage badge enhancements */
.members-mymessages-nospace .badge {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

.members-mymessages-nospace .badge.bg-primary {
    background: linear-gradient(135deg, #0d6efd, #0056b3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.members-mymessages-nospace .badge.bg-info {
    background: linear-gradient(135deg, #0dcaf0, #087990) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.members-mymessages-nospace .badge.bg-danger {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    animation: dangerBadgePulse 2s ease-in-out infinite;
}

.members-mymessages-nospace .badge.bg-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #000000 !important;
}

@keyframes dangerBadgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
}

/* Button enhancements for no space page */
.members-mymessages-nospace .btn {
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.members-mymessages-nospace .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.members-mymessages-nospace .btn:hover::before {
    left: 100%;
}

.members-mymessages-nospace .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Specific styling for outline-danger button */
.members-mymessages-nospace .btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent;
}

.members-mymessages-nospace .btn-outline-danger:hover {
    color: #ffffff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.3) !important;
}

.members-mymessages-nospace .btn-outline-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.members-mymessages-nospace .btn-outline-danger:active {
    color: #ffffff !important;
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* ==========================================================================
   MyVault No Space Page Specific Styles
   ========================================================================== */

/* MyVault No Space hero styling */
.members-myvault-nospace .hero-section .card-body {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
}

/* MyVault No Space hero icon color */
.members-myvault-nospace .hero-title i {
    color: #ffc107 !important;
}

/* Storage info items styling */
.members-myvault-nospace .storage-info-item {
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.members-myvault-nospace .storage-info-item:hover {
    transform: translateX(5px);
}

/* Option cards styling - using MyVault purple color scheme */
.members-myvault-nospace .option-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.members-myvault-nospace .option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 16, 242, 0.1), transparent);
    transition: left 0.5s ease;
}

.members-myvault-nospace .option-card:hover::before {
    left: 100%;
}

/* Storage progress bar for MyVault no space page */
.members-myvault-nospace .storage-progress {
    height: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 0;
    border: 2px solid #e9ecef;
    position: relative;
}

.members-myvault-nospace .storage-progress-bar {
    height: 100%;
    border-radius: 10px;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.members-myvault-nospace .storage-progress-full {
    background: linear-gradient(90deg, #dc3545, #c82333) !important;
    animation: vaultDangerPulse 2s ease-in-out infinite;
}

@keyframes vaultDangerPulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% { 
        opacity: 0.9;
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.3);
    }
}

/* Enhanced card borders for MyVault No Space */
.members-myvault-nospace .card.shadow-sm {
    border: 1px solid #adb5bd !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Warning card specific styling */
.members-myvault-nospace .card.border-warning {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3), 0 0 20px rgba(255, 193, 7, 0.2) !important;
    position: relative;
}

/* Storage badge enhancements with MyVault theme */
.members-myvault-nospace .badge {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

.members-myvault-nospace .badge.bg-primary {
    background: linear-gradient(135deg, #6610f2, #520dc2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.members-myvault-nospace .badge.bg-info {
    background: linear-gradient(135deg, #0dcaf0, #087990) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.members-myvault-nospace .badge.bg-danger {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    animation: vaultDangerBadgePulse 2s ease-in-out infinite;
}

.members-myvault-nospace .badge.bg-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #000000 !important;
}

@keyframes vaultDangerBadgePulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
}

/* Button enhancements for MyVault no space page */
.members-myvault-nospace .btn {
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.members-myvault-nospace .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.members-myvault-nospace .btn:hover::before {
    left: 100%;
}

.members-myvault-nospace .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Specific styling for warning button with MyVault theme */
.members-myvault-nospace .btn-warning {
    color: #000000 !important;
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
    border-color: #ffc107 !important;
}

.members-myvault-nospace .btn-warning:hover {
    color: #000000 !important;
    background: linear-gradient(135deg, #e0a800, #d39e00) !important;
    border-color: #e0a800 !important;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3) !important;
}

.members-myvault-nospace .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
    color: #000000 !important;
}

.members-myvault-nospace .btn-warning:active {
    color: #000000 !important;
    background: linear-gradient(135deg, #d39e00, #c69500) !important;
    border-color: #d39e00 !important;
}

/* CRITICAL: Force Cancel button to maintain its styling for MyVault */
.members-myvault-nospace .btn-outline-secondary {
    color: #6c757d !important;
    background-color: transparent !important;
    border-color: #6c757d !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.members-myvault-nospace .btn-outline-secondary:hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.members-myvault-nospace .btn-outline-secondary:focus {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
}

.members-myvault-nospace .btn-outline-secondary:active,
.members-myvault-nospace .btn-outline-secondary.active {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* Ensure button styling is preserved after JavaScript interactions */
.members-myvault-nospace .btn-outline-secondary:not(:disabled):not(.disabled) {
    color: #6c757d !important;
    background-color: transparent !important;
    border-color: #6c757d !important;
}

.members-myvault-nospace .btn-outline-secondary:not(:disabled):not(.disabled):hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* MyVault theme colors for text elements */
.members-myvault-nospace .text-primary {
    color: #6610f2 !important;
}

.members-myvault-nospace .breadcrumb-modern .breadcrumb-item a,
.members-myvault-nospace .breadcrumb-modern .breadcrumb-item.active {
    color: #6610f2 !important;
}

.members-myvault-nospace .breadcrumb-modern .breadcrumb-item a:hover {
    color: #520dc2 !important;
}

/* Card header override for MyVault theme */
.members-myvault-nospace .card-header.bg-primary {
    background: linear-gradient(135deg, #6610f2, #520dc2) !important;
    border-bottom: none;
}

/* Form labels with MyVault theme */
.members-myvault-nospace .form-label.fw-bold {
    color: #6610f2 !important;
}

/* File attachment icon styling */
.members-myvault-nospace .bg-info,
.members-myvault-nospace .bg-secondary {
    background: linear-gradient(135deg, var(--bs-bg-opacity, 1), rgba(255, 255, 255, 0.1)) !important;
}

/* Success state enhancements */
.members-myvault-nospace .text-success {
    color: #198754 !important;
}

.members-myvault-nospace .fa-check-circle {
    animation: vaultSuccessBounce 0.6s ease-out;
}

@keyframes vaultSuccessBounce {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Enhanced alert styling for MyVault remove pages */
.members-myvault-nospace .alert-warning .fa-info-circle,
.members-myvault-nospace .alert-warning .fa-lightbulb {
    color: #ffc107 !important;
    filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.8));
}

/* Badge enhancements for MyVault remove pages */
.members-myvault-nospace .badge {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

.members-myvault-nospace .badge.bg-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.members-myvault-nospace .badge.bg-light {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    color: #6610f2 !important;
    border: 1px solid rgba(102, 16, 242, 0.2);
}

/* Responsive design for MyVault remove file page */
@media (max-width: 575.98px) {
    .members-myvault-nospace .badge {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    .members-myvault-nospace .card-body {
        padding: 1rem !important;
    }
    
    .members-myvault-nospace .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   MyMessages Remove Attachment Page Specific Styles
   ========================================================================== */

/* MyMessages Remove hero styling */
.members-mymessages-remove .hero-section .card-body {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
}

/* MyMessages Remove hero icon color */
.members-mymessages-remove .hero-title i {
    color: #ffc107 !important;
}

/* Enhanced card borders for MyMessages Remove */
.members-mymessages-remove .card.shadow-sm {
    border: 1px solid #adb5bd !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Warning card specific styling for remove attachment */
.members-mymessages-remove .card.border-warning {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3), 0 0 20px rgba(255, 193, 7, 0.2) !important;
    position: relative;
}

/* Attachment detail animations */
.members-mymessages-remove .attachment-info-item {
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.members-mymessages-remove .attachment-info-item:hover {
    transform: translateX(5px);
}

/* Button enhancements for remove page */
.members-mymessages-remove .btn {
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.members-mymessages-remove .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.members-mymessages-remove .btn:hover::before {
    left: 100%;
}

.members-mymessages-remove .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Specific styling for warning button */
.members-mymessages-remove .btn-warning {
    color: #000000 !important;
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
    border-color: #ffc107 !important;
}

.members-mymessages-remove .btn-warning:hover {
    color: #000000 !important;
    background: linear-gradient(135deg, #e0a800, #d39e00) !important;
    border-color: #e0a800 !important;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3) !important;
}

.members-mymessages-remove .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
    color: #000000 !important;
}

.members-mymessages-remove .btn-warning:active {
    color: #000000 !important;
    background: linear-gradient(135deg, #d39e00, #c69500) !important;
    border-color: #d39e00 !important;
}

/* CRITICAL: Force Cancel button to maintain its styling */
.members-mymessages-remove .btn-outline-secondary {
    color: #6c757d !important;
    background-color: transparent !important;
    border-color: #6c757d !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.members-mymessages-remove .btn-outline-secondary:hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.members-mymessages-remove .btn-outline-secondary:focus {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
}

.members-mymessages-remove .btn-outline-secondary:active,
.members-mymessages-remove .btn-outline-secondary.active {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* Ensure button styling is preserved after JavaScript interactions */
.members-mymessages-remove .btn-outline-secondary:not(:disabled):not(.disabled) {
    color: #6c757d !important;
    background-color: transparent !important;
    border-color: #6c757d !important;
}

.members-mymessages-remove .btn-outline-secondary:not(:disabled):not(.disabled):hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* File attachment icon styling */
.members-mymessages-remove .bg-info,
.members-mymessages-remove .bg-secondary {
    background: linear-gradient(135deg, var(--bs-bg-opacity, 1), rgba(255, 255, 255, 0.1)) !important;
}

/* Success state enhancements */
.members-mymessages-remove .text-success {
    color: #198754 !important;
}

.members-mymessages-remove .fa-check-circle {
    animation: successBounce 0.6s ease-out;
}

@keyframes successBounce {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Enhanced alert styling for remove pages */
.members-mymessages-remove .alert-warning .fa-info-circle,
.members-mymessages-remove .alert-warning .fa-lightbulb {
    color: #ffc107 !important;
    filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.8));
}

/* Badge enhancements for remove pages */
.members-mymessages-remove .badge {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

.members-mymessages-remove .badge.bg-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

/* Responsive design for remove attachment page */
@media (max-width: 575.98px) {
    .members-mymessages-remove .badge {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    .members-mymessages-remove .card-body {
        padding: 1rem !important;
    }
    
    .members-mymessages-remove .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   END MyMessages Remove Attachment Page Specific Styles
   ========================================================================== */

/* ==========================================================================
   MyVault Remove File Page Specific Styles
   ========================================================================== */

/* MyVault Remove hero styling */
.members-myvault-remove .hero-section .card-body {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
}

/* MyVault Remove hero icon color */
.members-myvault-remove .hero-title i {
    color: #ffc107 !important;
}

/* Enhanced card borders for MyVault Remove */
.members-myvault-remove .card.shadow-sm {
    border: 1px solid #adb5bd !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Warning card specific styling for remove file */
.members-myvault-remove .card.border-warning {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3), 0 0 20px rgba(255, 193, 7, 0.2) !important;
    position: relative;
}

/* File detail animations */
.members-myvault-remove .file-info-item {
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.members-myvault-remove .file-info-item:hover {
    transform: translateX(5px);
}

/* Button enhancements for remove page with MyVault theme */
.members-myvault-remove .btn {
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.members-myvault-remove .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.members-myvault-remove .btn:hover::before {
    left: 100%;
}

.members-myvault-remove .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Specific styling for warning button with MyVault theme */
.members-myvault-remove .btn-warning {
    color: #000000 !important;
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
    border-color: #ffc107 !important;
}

.members-myvault-remove .btn-warning:hover {
    color: #000000 !important;
    background: linear-gradient(135deg, #e0a800, #d39e00) !important;
    border-color: #e0a800 !important;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3) !important;
}

.members-myvault-remove .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
    color: #000000 !important;
}

.members-myvault-remove .btn-warning:active {
    color: #000000 !important;
    background: linear-gradient(135deg, #d39e00, #c69500) !important;
    border-color: #d39e00 !important;
}

/* CRITICAL: Force Cancel button to maintain its styling for MyVault */
.members-myvault-remove .btn-outline-secondary {
    color: #6c757d !important;
    background-color: transparent !important;
    border-color: #6c757d !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.members-myvault-remove .btn-outline-secondary:hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.members-myvault-remove .btn-outline-secondary:focus {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
}

.members-myvault-remove .btn-outline-secondary:active,
.members-myvault-remove .btn-outline-secondary.active {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* Ensure button styling is preserved after JavaScript interactions */
.members-myvault-remove .btn-outline-secondary:not(:disabled):not(.disabled) {
    color: #6c757d !important;
    background-color: transparent !important;
    border-color: #6c757d !important;
}

.members-myvault-remove .btn-outline-secondary:not(:disabled):not(.disabled):hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* MyVault theme colors for text elements */
.members-myvault-remove .text-primary {
    color: #6610f2 !important;
}

.members-myvault-remove .breadcrumb-modern .breadcrumb-item a,
.members-myvault-remove .breadcrumb-modern .breadcrumb-item.active {
    color: #6610f2 !important;
}

.members-myvault-remove .breadcrumb-modern .breadcrumb-item a:hover {
    color: #520dc2 !important;
}

/* Card header override for MyVault theme */
.members-myvault-remove .card-header.bg-primary {
    background: linear-gradient(135deg, #6610f2, #520dc2) !important;
    border-bottom: none;
}

/* Form labels with MyVault theme */
.members-myvault-remove .form-label.fw-bold {
    color: #6610f2 !important;
}

/* File attachment icon styling */
.members-myvault-remove .bg-info,
.members-myvault-remove .bg-secondary {
    background: linear-gradient(135deg, var(--bs-bg-opacity, 1), rgba(255, 255, 255, 0.1)) !important;
}

/* Success state enhancements */
.members-myvault-remove .text-success {
    color: #198754 !important;
}

.members-myvault-remove .fa-check-circle {
    animation: vaultSuccessBounce 0.6s ease-out;
}

@keyframes vaultSuccessBounce {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Enhanced alert styling for MyVault remove pages */
.members-myvault-remove .alert-warning .fa-info-circle,
.members-myvault-remove .alert-warning .fa-lightbulb {
    color: #ffc107 !important;
    filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.8));
}

/* Badge enhancements for MyVault remove pages */
.members-myvault-remove .badge {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

.members-myvault-remove .badge.bg-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.members-myvault-remove .badge.bg-light {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    color: #6610f2 !important;
    border: 1px solid rgba(102, 16, 242, 0.2);
}

/* Responsive design for MyVault remove file page */
@media (max-width: 575.98px) {
    .members-myvault-remove .badge {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    .members-myvault-remove .card-body {
        padding: 1rem !important;
    }
    
    .members-myvault-remove .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   Join MyWill Trial Page Specific Styles
   ========================================================================== */

/* Hero section styling for join page */
.members-join-mywilltrial .hero-section .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* Action cards container - ensure equal heights */
.members-join-mywilltrial .row.g-3 {
    display: flex;
    flex-wrap: wrap;
}

.members-join-mywilltrial .row.g-3 > [class*="col-"] {
    display: flex;
}

/* Action cards - base styles with FIXED dimensions to prevent resizing */
.members-join-mywilltrial a.card.h-100.hover-shadow {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 200px !important;
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Action cards hover effects - CSS only */
.members-join-mywilltrial a.card.h-100.hover-shadow:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border-color: #008AA0 !important;
}

/* CRITICAL: Prevent size change on click/active/focus */
.members-join-mywilltrial a.card.h-100.hover-shadow:active,
.members-join-mywilltrial a.card.h-100.hover-shadow:focus,
.members-join-mywilltrial a.card.h-100.hover-shadow:focus-visible,
.members-join-mywilltrial a.card.h-100.hover-shadow:focus-within {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    border-color: #008AA0 !important;
    outline: none !important;
    width: 100% !important;
    min-height: 200px !important;
}

/* Remove any outline that might affect sizing */
.members-join-mywilltrial a.card.h-100.hover-shadow:focus {
    outline: 2px solid #008AA0 !important;
    outline-offset: 2px !important;
}

/* Card body inside action cards */
.members-join-mywilltrial a.card.h-100.hover-shadow .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Icon circle base styles - ensures perfect circles */
.members-join-mywilltrial .icon-circle {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.members-join-mywilltrial .icon-circle i {
    font-size: 1.5rem !important;
    line-height: 1 !important;
}

/* Icon circle color variants */
.members-join-mywilltrial .icon-circle-primary {
    background-color: rgba(0, 138, 160, 0.1) !important;
}

.members-join-mywilltrial .icon-circle-primary i {
    color: #008AA0 !important;
}

.members-join-mywilltrial .icon-circle-info {
    background-color: rgba(13, 202, 240, 0.1) !important;
}

.members-join-mywilltrial .icon-circle-info i {
    color: #0dcaf0 !important;
}

.members-join-mywilltrial .icon-circle-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
}

.members-join-mywilltrial .icon-circle-success i {
    color: #198754 !important;
}

.members-join-mywilltrial .icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.members-join-mywilltrial .icon-circle-warning i {
    color: #ffc107 !important;
    font-size: 1.75rem !important;
}

/* Warning card styling for create account section */
.members-join-mywilltrial .card.border-warning {
    border-width: 2px !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2) !important;
}

/* Success card styling */
.members-join-mywilltrial .card.border-success {
    border-width: 2px !important;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.15) !important;
}

/* Create Account button styling */
.members-join-mywilltrial .btn-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
    border-color: #ffc107 !important;
    transition: all 0.3s ease;
}

.members-join-mywilltrial .btn-warning:hover {
    background: linear-gradient(135deg, #e0a800, #d39e00) !important;
    border-color: #e0a800 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4) !important;
}

.members-join-mywilltrial .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

/* Card title styling */
.members-join-mywilltrial .card-title {
    font-weight: 600;
    color: #2c3e50;
}

/* Card text styling */
.members-join-mywilltrial .card-text {
    line-height: 1.5;
}

/* Success header styling */
.members-join-mywilltrial .card-header.bg-success {
    background: linear-gradient(135deg, #198754, #157347) !important;
    border-bottom: none;
}

/* Primary header styling */
.members-join-mywilltrial .card-header.bg-primary {
    background: linear-gradient(135deg, #008AA0, #006a7a) !important;
    border-bottom: none;
}

/* Light header styling */
.members-join-mywilltrial .card-header.bg-light {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    border-bottom: 1px solid #dee2e6;
}

/* Alert styling within cards */
.members-join-mywilltrial .alert.border-start {
    border-radius: 0.5rem;
}

/* Memorial link button */
.members-join-mywilltrial .btn-outline-secondary {
    border-width: 2px;
    font-weight: 500;
}

.members-join-mywilltrial .btn-outline-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

/* Home button styling */
.members-join-mywilltrial .btn-outline-primary {
    border-width: 2px;
    font-weight: 500;
}

.members-join-mywilltrial .btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 138, 160, 0.2);
}

/* Horizontal rule styling */
.members-join-mywilltrial hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #dee2e6, transparent);
    opacity: 1;
}

/* Large icons in cards */
.members-join-mywilltrial .fa-5x {
    font-size: 4rem !important;
}

/* Text coloring overrides */
.members-join-mywilltrial .text-primary {
    color: #008AA0 !important;
}

/* Lead text styling */
.members-join-mywilltrial .lead {
    font-size: 1.15rem;
    font-weight: 400;
    color: #495057;
}

/* Responsive design for join page */
@media (max-width: 991.98px) {
    .members-join-mywilltrial .hero-title {
        font-size: 2rem;
        text-align: center;
    }
    
    .members-join-mywilltrial .hero-subtitle,
    .members-join-mywilltrial .hero-description {
        text-align: center;
    }
    
    .members-join-mywilltrial .card.border-warning .d-flex.align-items-start {
        flex-direction: column;
        text-align: center;
    }
    
    .members-join-mywilltrial .card.border-warning .ms-4 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }
    
    .members-join-mywilltrial .card.border-warning .flex-shrink-0 {
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .members-join-mywilltrial .icon-circle {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }
    
    .members-join-mywilltrial .icon-circle i {
        font-size: 1.25rem !important;
    }
    
    .members-join-mywilltrial .icon-circle-warning i {
        font-size: 1.5rem !important;
    }
    
    .members-join-mywilltrial a.card.h-100.hover-shadow .card-body {
        padding: 1rem !important;
    }
    
    .members-join-mywilltrial a.card.h-100.hover-shadow {
        min-height: 180px !important;
    }
    
    .members-join-mywilltrial a.card.h-100.hover-shadow:active,
    .members-join-mywilltrial a.card.h-100.hover-shadow:focus,
    .members-join-mywilltrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 180px !important;
    }
    
    .members-join-mywilltrial .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .members-join-mywilltrial .hero-title {
        font-size: 1.75rem;
    }
    
    .members-join-mywilltrial .card-body {
        padding: 1rem !important;
    }
    
    .members-join-mywilltrial .lead {
        font-size: 1rem;
    }
    
    .members-join-mywilltrial .fa-5x {
        font-size: 3rem !important;
    }
    
    .members-join-mywilltrial .icon-circle {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }
    
    .members-join-mywilltrial .icon-circle i {
        font-size: 1rem !important;
    }
    
    .members-join-mywilltrial .icon-circle-warning i {
        font-size: 1.25rem !important;
    }
    
    .members-join-mywilltrial a.card.h-100.hover-shadow {
        min-height: 160px !important;
    }
    
    .members-join-mywilltrial a.card.h-100.hover-shadow:active,
    .members-join-mywilltrial a.card.h-100.hover-shadow:focus,
    .members-join-mywilltrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 160px !important;
    }
}

/* ==========================================================================
   Members Join Any Trial Page Styles
   Extends the same styling as join_mywilltrial for consistent design
   ========================================================================== */
.members-join-anytrial .hero-section .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
    border-radius: 0.5rem;
}

.members-join-anytrial .row.g-3 {
    display: flex;
    flex-wrap: wrap;
}

.members-join-anytrial .row.g-3 > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.members-join-anytrial a.card.h-100.hover-shadow {
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: all 0.3s ease;
    border-color: #e0e0e0;
    background-color: #ffffff;
    min-height: 200px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0.5rem;
}

.members-join-anytrial a.card.h-100.hover-shadow:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: #008AA0;
}

.members-join-anytrial a.card.h-100.hover-shadow:active,
.members-join-anytrial a.card.h-100.hover-shadow:focus,
.members-join-anytrial a.card.h-100.hover-shadow:focus-visible,
.members-join-anytrial a.card.h-100.hover-shadow:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: #008AA0;
    outline: 3px solid #008AA0;
    outline-offset: 2px;
}

.members-join-anytrial a.card.h-100.hover-shadow:focus {
    outline: 3px solid #008AA0;
    outline-offset: 2px;
}

.members-join-anytrial a.card.h-100.hover-shadow .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 1.5rem;
}

/* Icon circle styling for join-anytrial */
.members-join-anytrial .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-color: rgba(0, 138, 160, 0.1);
}

.members-join-anytrial .icon-circle i {
    font-size: 1.5rem;
    color: #008AA0;
}

.members-join-anytrial .icon-circle-primary {
    background-color: rgba(0, 138, 160, 0.1);
}

.members-join-anytrial .icon-circle-primary i {
    color: #008AA0;
}

.members-join-anytrial .icon-circle-info {
    background-color: rgba(23, 162, 184, 0.1);
}

.members-join-anytrial .icon-circle-info i {
    color: #17a2b8;
}

.members-join-anytrial .icon-circle-success {
    background-color: rgba(40, 167, 69, 0.1);
}

.members-join-anytrial .icon-circle-success i {
    color: #28a745;
}

.members-join-anytrial .icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.members-join-anytrial .icon-circle-warning i {
    color: #d39e00;
}

/* Card border colors */
.members-join-anytrial .card.border-warning {
    border-width: 2px !important;
    border-color: #ffc107 !important;
    background-color: #fffbeb;
}

.members-join-anytrial .card.border-success {
    border-width: 2px !important;
    border-color: #28a745 !important;
}

/* Warning button styling */
.members-join-anytrial .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.members-join-anytrial .btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
    transform: translateY(-2px);
}

.members-join-anytrial .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

/* Typography */
.members-join-anytrial .card-title {
    color: #212529;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.members-join-anytrial .card-text {
    color: #6c757d;
    line-height: 1.5;
}

/* Card header colors */
.members-join-anytrial .card-header.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-bottom: none;
}

.members-join-anytrial .card-header.bg-primary {
    background: linear-gradient(135deg, #008AA0 0%, #00b4d8 100%) !important;
    border-bottom: none;
}

.members-join-anytrial .card-header.bg-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #dee2e6;
}

/* Alert styling */
.members-join-anytrial .alert.border-start {
    border-left-width: 4px !important;
}

/* Button outline styles */
.members-join-anytrial .btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}

.members-join-anytrial .btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.members-join-anytrial .btn-outline-primary {
    border-color: #008AA0;
    color: #008AA0;
}

.members-join-anytrial .btn-outline-primary:hover {
    background-color: #008AA0;
    border-color: #008AA0;
    color: #fff;
}

/* Horizontal rule */
.members-join-anytrial hr {
    border-color: #dee2e6;
    opacity: 0.5;
}

/* Large icon styling */
.members-join-anytrial .fa-5x {
    font-size: 3rem;
}

/* Primary text color */
.members-join-anytrial .text-primary {
    color: #008AA0 !important;
}

/* Lead text */
.members-join-anytrial .lead {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Responsive adjustments for join-anytrial */
@media (max-width: 991.98px) {
    .members-join-anytrial .hero-title {
        font-size: 1.75rem;
    }

    .members-join-anytrial .hero-subtitle,
    .members-join-anytrial .hero-description {
        font-size: 1rem;
    }

    .members-join-anytrial .card.border-warning .d-flex.align-items-start {
        flex-direction: column;
    }

    .members-join-anytrial .card.border-warning .ms-4 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .members-join-anytrial .card.border-warning .flex-shrink-0 {
        margin-bottom: 0.5rem;
    }

    /* Icon circle on medium screens */
    .members-join-anytrial .icon-circle {
        width: 50px;
        height: 50px;
    }

    .members-join-anytrial .icon-circle i {
        font-size: 1.25rem;
    }

    .members-join-anytrial .icon-circle-warning i {
        font-size: 1.25rem;
    }

    .members-join-anytrial a.card.h-100.hover-shadow .card-body {
        padding: 1.25rem;
    }

    .members-join-anytrial a.card.h-100.hover-shadow {
        min-height: 180px;
    }

    .members-join-anytrial a.card.h-100.hover-shadow:active,
    .members-join-anytrial a.card.h-100.hover-shadow:focus,
    .members-join-anytrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 180px;
    }
}

@media (max-width: 575.98px) {
    .members-join-anytrial .btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    .members-join-anytrial .hero-title {
        font-size: 1.5rem;
    }

    .members-join-anytrial .card-body {
        padding: 1rem;
    }

    .members-join-anytrial .lead {
        font-size: 1rem;
    }

    .members-join-anytrial .fa-5x {
        font-size: 2.5rem;
    }

    .members-join-anytrial .icon-circle {
        width: 45px;
        height: 45px;
    }

    .members-join-anytrial .icon-circle i {
        font-size: 1rem !important;
    }

    .members-join-anytrial .icon-circle-warning i {
        font-size: 1.25rem !important;
    }

    .members-join-anytrial a.card.h-100.hover-shadow {
        min-height: 160px !important;
    }

    .members-join-anytrial a.card.h-100.hover-shadow:active,
    .members-join-anytrial a.card.h-100.hover-shadow:focus,
    .members-join-anytrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 160px !important;
    }
}

/* ==========================================================================
   Members Join Estate Trial Page Styles
   Extends the same styling as join_mywilltrial for consistent design
   ========================================================================== */
.members-join-estatetrial .hero-section .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
    border-radius: 0.5rem;
}

.members-join-estatetrial .row.g-3 {
    display: flex;
    flex-wrap: wrap;
}

.members-join-estatetrial .row.g-3 > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.members-join-estatetrial a.card.h-100.hover-shadow {
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: all 0.3s ease;
    border-color: #e0e0e0;
    background-color: #ffffff;
    min-height: 200px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0.5rem;
}

.members-join-estatetrial a.card.h-100.hover-shadow:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: #008AA0;
}

.members-join-estatetrial a.card.h-100.hover-shadow:active,
.members-join-estatetrial a.card.h-100.hover-shadow:focus,
.members-join-estatetrial a.card.h-100.hover-shadow:focus-visible,
.members-join-estatetrial a.card.h-100.hover-shadow:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: #008AA0;
    outline: 3px solid #008AA0;
    outline-offset: 2px;
}

.members-join-estatetrial a.card.h-100.hover-shadow:focus {
    outline: 3px solid #008AA0;
    outline-offset: 2px;
}

.members-join-estatetrial a.card.h-100.hover-shadow .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 1.5rem;
}

/* Icon circle styling for join-estatetrial */
.members-join-estatetrial .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-color: rgba(0, 138, 160, 0.1);
}

.members-join-estatetrial .icon-circle i {
    font-size: 1.5rem;
    color: #008AA0;
}

.members-join-estatetrial .icon-circle-primary {
    background-color: rgba(0, 138, 160, 0.1);
}

.members-join-estatetrial .icon-circle-primary i {
    color: #008AA0;
}

.members-join-estatetrial .icon-circle-info {
    background-color: rgba(23, 162, 184, 0.1);
}

.members-join-estatetrial .icon-circle-info i {
    color: #17a2b8;
}

.members-join-estatetrial .icon-circle-success {
    background-color: rgba(40, 167, 69, 0.1);
}

.members-join-estatetrial .icon-circle-success i {
    color: #28a745;
}

.members-join-estatetrial .icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.members-join-estatetrial .icon-circle-warning i {
    color: #d39e00;
}

/* Card border colors */
.members-join-estatetrial .card.border-warning {
    border-width: 2px !important;
    border-color: #ffc107 !important;
    background-color: #fffbeb;
}

.members-join-estatetrial .card.border-success {
    border-width: 2px !important;
    border-color: #28a745 !important;
}

/* Warning button styling */
.members-join-estatetrial .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.members-join-estatetrial .btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
    transform: translateY(-2px);
}

.members-join-estatetrial .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

/* Typography */
.members-join-estatetrial .card-title {
    color: #212529;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.members-join-estatetrial .card-text {
    color: #6c757d;
    line-height: 1.5;
}

/* Card header colors */
.members-join-estatetrial .card-header.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-bottom: none;
}

.members-join-estatetrial .card-header.bg-primary {
    background: linear-gradient(135deg, #008AA0 0%, #00b4d8 100%) !important;
    border-bottom: none;
}

.members-join-estatetrial .card-header.bg-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #dee2e6;
}

/* Alert styling */
.members-join-estatetrial .alert.border-start {
    border-left-width: 4px !important;
}

/* Button outline styles */
.members-join-estatetrial .btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}

.members-join-estatetrial .btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.members-join-estatetrial .btn-outline-primary {
    border-color: #008AA0;
    color: #008AA0;
}

.members-join-estatetrial .btn-outline-primary:hover {
    background-color: #008AA0;
    border-color: #008AA0;
    color: #fff;
}

/* Horizontal rule */
.members-join-estatetrial hr {
    border-color: #dee2e6;
    opacity: 0.5;
}

/* Large icon styling */
.members-join-estatetrial .fa-5x {
    font-size: 3rem;
}

/* Primary text color */
.members-join-estatetrial .text-primary {
    color: #008AA0 !important;
}

/* Lead text */
.members-join-estatetrial .lead {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Document cards styling */
.members-join-estatetrial .card.h-100.border {
    transition: all 0.3s ease;
}

.members-join-estatetrial .card.h-100.border:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.members-join-estatetrial .card.h-100.border .card-header {
    background-color: #fff;
}

.members-join-estatetrial .d-grid.gap-2 .btn {
    text-align: left;
    padding: 0.5rem 0.75rem;
}

.members-join-estatetrial .d-grid.gap-2 .btn i {
    margin-right: 0.5rem;
}

/* Responsive adjustments for join-estatetrial */
@media (max-width: 991.98px) {
    .members-join-estatetrial .hero-title {
        font-size: 1.75rem;
    }

    .members-join-estatetrial .hero-subtitle,
    .members-join-estatetrial .hero-description {
        font-size: 1rem;
    }

    .members-join-estatetrial .card.border-warning .d-flex.align-items-start {
        flex-direction: column;
    }

    .members-join-estatetrial .card.border-warning .ms-4 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .members-join-estatetrial .card.border-warning .flex-shrink-0 {
        margin-bottom: 0.5rem;
    }

    /* Icon circle on medium screens */
    .members-join-estatetrial .icon-circle {
        width: 50px;
        height: 50px;
    }

    .members-join-estatetrial .icon-circle i {
        font-size: 1.25rem;
    }

    .members-join-estatetrial .icon-circle-warning i {
        font-size: 1.25rem;
    }

    .members-join-estatetrial a.card.h-100.hover-shadow .card-body {
        padding: 1.25rem;
    }

    .members-join-estatetrial a.card.h-100.hover-shadow {
        min-height: 180px;
    }

    .members-join-estatetrial a.card.h-100.hover-shadow:active,
    .members-join-estatetrial a.card.h-100.hover-shadow:focus,
    .members-join-estatetrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 180px;
    }
}

@media (max-width: 575.98px) {
    .members-join-estatetrial .btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    .members-join-estatetrial .hero-title {
        font-size: 1.5rem;
    }

    .members-join-estatetrial .card-body {
        padding: 1rem;
    }

    .members-join-estatetrial .lead {
        font-size: 1rem;
    }

    .members-join-estatetrial .fa-5x {
        font-size: 2.5rem;
    }

    .members-join-estatetrial .icon-circle {
        width: 45px;
        height: 45px;
    }

    .members-join-estatetrial .icon-circle i {
        font-size: 1rem !important;
    }

    .members-join-estatetrial .icon-circle-warning i {
        font-size: 1.25rem !important;
    }

    .members-join-estatetrial a.card.h-100.hover-shadow {
        min-height: 160px !important;
    }

    .members-join-estatetrial a.card.h-100.hover-shadow:active,
    .members-join-estatetrial a.card.h-100.hover-shadow:focus,
    .members-join-estatetrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 160px !important;
    }
}

/* ==========================================================================
   Members Join MyExpatWill Trial Page Styles
   Extends the same styling as join_mywilltrial for consistent design
   ========================================================================== */
.members-join-myexpatwilltrial .hero-section .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
    border-radius: 0.5rem;
}

.members-join-myexpatwilltrial .row.g-3 {
    display: flex;
    flex-wrap: wrap;
}

.members-join-myexpatwilltrial .row.g-3 > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.members-join-myexpatwilltrial a.card.h-100.hover-shadow {
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: all 0.3s ease;
    border-color: #e0e0e0;
    background-color: #ffffff;
    min-height: 200px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0.5rem;
}

.members-join-myexpatwilltrial a.card.h-100.hover-shadow:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: #008AA0;
}

.members-join-myexpatwilltrial a.card.h-100.hover-shadow:active,
.members-join-myexpatwilltrial a.card.h-100.hover-shadow:focus,
.members-join-myexpatwilltrial a.card.h-100.hover-shadow:focus-visible,
.members-join-myexpatwilltrial a.card.h-100.hover-shadow:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: #008AA0;
    outline: 3px solid #008AA0;
    outline-offset: 2px;
}

.members-join-myexpatwilltrial a.card.h-100.hover-shadow:focus {
    outline: 3px solid #008AA0;
    outline-offset: 2px;
}

.members-join-myexpatwilltrial a.card.h-100.hover-shadow .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 1.5rem;
}

/* Icon circle styling for join-myexpatwilltrial */
.members-join-myexpatwilltrial .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-color: rgba(0, 138, 160, 0.1);
}

.members-join-myexpatwilltrial .icon-circle i {
    font-size: 1.5rem;
    color: #008AA0;
}

.members-join-myexpatwilltrial .icon-circle-primary {
    background-color: rgba(0, 138, 160, 0.1);
}

.members-join-myexpatwilltrial .icon-circle-primary i {
    color: #008AA0;
}

.members-join-myexpatwilltrial .icon-circle-info {
    background-color: rgba(23, 162, 184, 0.1);
}

.members-join-myexpatwilltrial .icon-circle-info i {
    color: #17a2b8;
}

.members-join-myexpatwilltrial .icon-circle-success {
    background-color: rgba(40, 167, 69, 0.1);
}

.members-join-myexpatwilltrial .icon-circle-success i {
    color: #28a745;
}

.members-join-myexpatwilltrial .icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.members-join-myexpatwilltrial .icon-circle-warning i {
    color: #d39e00;
}

/* Card border colors */
.members-join-myexpatwilltrial .card.border-warning {
    border-width: 2px !important;
    border-color: #ffc107 !important;
    background-color: #fffbeb;
}

.members-join-myexpatwilltrial .card.border-success {
    border-width: 2px !important;
    border-color: #28a745 !important;
}

/* Warning button styling */
.members-join-myexpatwilltrial .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.members-join-myexpatwilltrial .btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
    transform: translateY(-2px);
}

.members-join-myexpatwilltrial .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

/* Typography */
.members-join-myexpatwilltrial .card-title {
    color: #212529;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.members-join-myexpatwilltrial .card-text {
    color: #6c757d;
    line-height: 1.5;
}

/* Card header colors */
.members-join-myexpatwilltrial .card-header.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-bottom: none;
}

.members-join-myexpatwilltrial .card-header.bg-primary {
    background: linear-gradient(135deg, #008AA0 0%, #00b4d8 100%) !important;
    border-bottom: none;
}

.members-join-myexpatwilltrial .card-header.bg-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #dee2e6;
}

/* Alert styling */
.members-join-myexpatwilltrial .alert.border-start {
    border-left-width: 4px !important;
}

/* Button outline styles */
.members-join-myexpatwilltrial .btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}

.members-join-myexpatwilltrial .btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.members-join-myexpatwilltrial .btn-outline-primary {
    border-color: #008AA0;
    color: #008AA0;
}

.members-join-myexpatwilltrial .btn-outline-primary:hover {
    background-color: #008AA0;
    border-color: #008AA0;
    color: #fff;
}

/* Horizontal rule */
.members-join-myexpatwilltrial hr {
    border-color: #dee2e6;
    opacity: 0.5;
}

/* Large icon styling */
.members-join-myexpatwilltrial .fa-5x {
    font-size: 3rem;
}

/* Primary text color */
.members-join-myexpatwilltrial .text-primary {
    color: #008AA0 !important;
}

/* Lead text */
.members-join-myexpatwilltrial .lead {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Document cards styling */
.members-join-myexpatwilltrial .card.h-100.border {
    transition: all 0.3s ease;
}

.members-join-myexpatwilltrial .card.h-100.border:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.members-join-myexpatwilltrial .card.h-100.border .card-header {
    background-color: #fff;
}

.members-join-myexpatwilltrial .d-grid.gap-2 .btn {
    text-align: left;
    padding: 0.5rem 0.75rem;
}

.members-join-myexpatwilltrial .d-grid.gap-2 .btn i {
    margin-right: 0.5rem;
}

/* Responsive adjustments for join-myexpatwilltrial */
@media (max-width: 991.98px) {
    .members-join-myexpatwilltrial .hero-title {
        font-size: 1.75rem;
    }

    .members-join-myexpatwilltrial .hero-subtitle,
    .members-join-myexpatwilltrial .hero-description {
        font-size: 1rem;
    }

    .members-join-myexpatwilltrial .card.border-warning .d-flex.align-items-start {
        flex-direction: column;
    }

    .members-join-myexpatwilltrial .card.border-warning .ms-4 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .members-join-myexpatwilltrial .card.border-warning .flex-shrink-0 {
        margin-bottom: 0.5rem;
    }

    /* Icon circle on medium screens */
    .members-join-myexpatwilltrial .icon-circle {
        width: 50px;
        height: 50px;
    }

    .members-join-myexpatwilltrial .icon-circle i {
        font-size: 1.25rem;
    }

    .members-join-myexpatwilltrial .icon-circle-warning i {
        font-size: 1.25rem;
    }

    .members-join-myexpatwilltrial a.card.h-100.hover-shadow .card-body {
        padding: 1.25rem;
    }

    .members-join-myexpatwilltrial a.card.h-100.hover-shadow {
        min-height: 180px;
    }

    .members-join-myexpatwilltrial a.card.h-100.hover-shadow:active,
    .members-join-myexpatwilltrial a.card.h-100.hover-shadow:focus,
    .members-join-myexpatwilltrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 180px;
    }
}

@media (max-width: 575.98px) {
    .members-join-myexpatwilltrial .btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    .members-join-myexpatwilltrial .hero-title {
        font-size: 1.5rem;
    }

    .members-join-myexpatwilltrial .card-body {
        padding: 1rem;
    }

    .members-join-myexpatwilltrial .lead {
        font-size: 1rem;
    }

    .members-join-myexpatwilltrial .fa-5x {
        font-size: 2.5rem;
    }

    .members-join-myexpatwilltrial .icon-circle {
        width: 45px;
        height: 45px;
    }

    .members-join-myexpatwilltrial .icon-circle i {
        font-size: 1rem !important;
    }

    .members-join-myexpatwilltrial .icon-circle-warning i {
        font-size: 1.25rem !important;
    }

    .members-join-myexpatwilltrial a.card.h-100.hover-shadow {
        min-height: 160px !important;
    }

    .members-join-myexpatwilltrial a.card.h-100.hover-shadow:active,
    .members-join-myexpatwilltrial a.card.h-100.hover-shadow:focus,
    .members-join-myexpatwilltrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 160px !important;
    }
}

/* ============================================
   JOIN MYFUNERALTRIAL PAGE STYLES
   Styles for /members/join_myfuneraltrial.aspx
   and /fr/members/join_myfuneraltrial.aspx
   ============================================ */

/* Hero Section */
.members-join-myfuneraltrial .hero-section .card {
    border-radius: 0.5rem;
    overflow: hidden;
}

.members-join-myfuneraltrial .hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

.members-join-myfuneraltrial .hero-subtitle {
    font-size: 1.1rem;
    color: #666;
}

.members-join-myfuneraltrial .hero-description {
    font-size: 1rem;
    color: #555;
}

.members-join-myfuneraltrial .hero-icon {
    font-size: 4rem;
    color: #6c757d;
    opacity: 0.3;
}

.members-join-myfuneraltrial .hero-icon i {
    color: #dc3545;
}

/* Icon Circles */
.members-join-myfuneraltrial .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.members-join-myfuneraltrial .icon-circle i {
    font-size: 1.5rem;
}

.members-join-myfuneraltrial .icon-circle-primary {
    background-color: rgba(13, 110, 253, 0.1);
}

.members-join-myfuneraltrial .icon-circle-primary i {
    color: #0d6efd;
}

.members-join-myfuneraltrial .icon-circle-success {
    background-color: rgba(25, 135, 84, 0.1);
}

.members-join-myfuneraltrial .icon-circle-success i {
    color: #198754;
}

.members-join-myfuneraltrial .icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.members-join-myfuneraltrial .icon-circle-warning i {
    color: #ffc107;
    font-size: 1.75rem;
}

.members-join-myfuneraltrial .icon-circle-info {
    background-color: rgba(13, 202, 240, 0.1);
}

.members-join-myfuneraltrial .icon-circle-info i {
    color: #0dcaf0;
}

/* Card Hover Effects */
.members-join-myfuneraltrial .hover-shadow {
    transition: all 0.3s ease;
}

.members-join-myfuneraltrial .hover-shadow:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.members-join-myfuneraltrial .hover-shadow:focus,
.members-join-myfuneraltrial .hover-shadow:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.members-join-myfuneraltrial .transition-all {
    transition: all 0.3s ease;
}

/* Action Cards */
.members-join-myfuneraltrial a.card {
    cursor: pointer;
}

.members-join-myfuneraltrial a.card:hover .card-title {
    color: #0d6efd !important;
}

.members-join-myfuneraltrial a.card:hover .icon-circle {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Success Alert Cards */
.members-join-myfuneraltrial .card.border-success {
    border-width: 2px !important;
}

/* Warning Alert Card */
.members-join-myfuneraltrial .card.border-warning {
    border-width: 2px !important;
}

/* Thank You Card Header */
.members-join-myfuneraltrial .card-header.bg-success {
    border-bottom: none;
}

/* Quick Actions Card Header */
.members-join-myfuneraltrial .card-header.bg-primary {
    border-bottom: none;
}

/* Other Options Card Header */
.members-join-myfuneraltrial .card-header.bg-light {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Alert with Left Border */
.members-join-myfuneraltrial .alert.border-start.border-success {
    background-color: #f8f9fa;
}

/* Button Styles */
.members-join-myfuneraltrial .btn-warning.text-dark {
    border: none;
}

.members-join-myfuneraltrial .btn-warning.text-dark:hover {
    background-color: #e0a800;
    transform: translateY(-1px);
}

.members-join-myfuneraltrial .btn-warning.text-dark:focus,
.members-join-myfuneraltrial .btn-warning.text-dark:focus-visible {
    outline: 2px solid #ffc107;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

.members-join-myfuneraltrial .btn-outline-primary:focus,
.members-join-myfuneraltrial .btn-outline-primary:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.members-join-myfuneraltrial .btn-outline-secondary:focus,
.members-join-myfuneraltrial .btn-outline-secondary:focus-visible {
    outline: 2px solid #6c757d;
    outline-offset: 2px;
}

/* Large Icons */
.members-join-myfuneraltrial .fa-5x {
    font-size: 4rem;
}

/* Text Colors */
.members-join-myfuneraltrial .text-success {
    color: #198754 !important;
}

.members-join-myfuneraltrial .text-warning {
    color: #ffc107 !important;
}

.members-join-myfuneraltrial .text-danger {
    color: #dc3545 !important;
}

/* Lead Text */
.members-join-myfuneraltrial .lead {
    font-size: 1.15rem;
    font-weight: 400;
}

/* Card Title in Action Cards */
.members-join-myfuneraltrial .card-title {
    font-weight: 600;
    transition: color 0.3s ease;
}

/* Card Text Description */
.members-join-myfuneraltrial .card-text {
    line-height: 1.5;
}

/* Horizontal Rule */
.members-join-myfuneraltrial hr {
    border-color: #dee2e6;
    opacity: 0.5;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .members-join-myfuneraltrial .hero-title {
        font-size: 1.75rem;
    }

    .members-join-myfuneraltrial .hero-icon {
        font-size: 3rem;
    }

    .members-join-myfuneraltrial .fa-5x {
        font-size: 3rem;
    }
}

@media (max-width: 767.98px) {
    .members-join-myfuneraltrial .d-flex.align-items-start {
        flex-direction: column;
    }

    .members-join-myfuneraltrial .d-flex.align-items-start .ms-4 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .members-join-myfuneraltrial .d-flex.align-items-center .ms-4 {
        margin-left: 1rem !important;
    }

    .members-join-myfuneraltrial .icon-circle {
        width: 50px;
        height: 50px;
    }

    .members-join-myfuneraltrial .icon-circle i {
        font-size: 1.25rem;
    }

    .members-join-myfuneraltrial a.card.h-100.hover-shadow {
        min-height: 180px !important;
    }

    .members-join-myfuneraltrial a.card.h-100.hover-shadow:active,
    .members-join-myfuneraltrial a.card.h-100.hover-shadow:focus,
    .members-join-myfuneraltrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 180px !important;
    }
}

@media (max-width: 575.98px) {
    .members-join-myfuneraltrial .btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    .members-join-myfuneraltrial .hero-title {
        font-size: 1.5rem;
    }

    .members-join-myfuneraltrial .card-body {
        padding: 1rem;
    }

    .members-join-myfuneraltrial .lead {
        font-size: 1rem;
    }

    .members-join-myfuneraltrial .fa-5x {
        font-size: 2.5rem;
    }

    .members-join-myfuneraltrial .icon-circle {
        width: 45px;
        height: 45px;
    }

    .members-join-myfuneraltrial .icon-circle i {
        font-size: 1rem !important;
    }

    .members-join-myfuneraltrial .icon-circle-warning i {
        font-size: 1.25rem !important;
    }

    .members-join-myfuneraltrial a.card.h-100.hover-shadow {
        min-height: 160px !important;
    }

    .members-join-myfuneraltrial a.card.h-100.hover-shadow:active,
    .members-join-myfuneraltrial a.card.h-100.hover-shadow:focus,
    .members-join-myfuneraltrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 160px !important;
    }
}

/* =====================================================
   JOIN MYLIFELOCKERTRIAL PAGE STYLES
   ===================================================== */

.members-join-mylifelockertrial .hero-section .card {
    border-radius: 0.5rem;
}

.members-join-mylifelockertrial .hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
}

.members-join-mylifelockertrial .hero-subtitle {
    font-size: 1rem;
    color: #666;
}

.members-join-mylifelockertrial .hero-description {
    font-size: 1rem;
    color: #555;
}

.members-join-mylifelockertrial .hero-icon {
    font-size: 4rem;
    color: rgba(0, 123, 255, 0.15);
}

.members-join-mylifelockertrial .hero-icon i {
    color: rgba(0, 123, 255, 0.25);
}

.members-join-mylifelockertrial .icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.members-join-mylifelockertrial .icon-circle i {
    font-size: 1.25rem;
}

.members-join-mylifelockertrial .icon-circle-primary {
    background-color: rgba(13, 110, 253, 0.1);
}

.members-join-mylifelockertrial .icon-circle-primary i {
    color: #0d6efd;
}

.members-join-mylifelockertrial .icon-circle-success {
    background-color: rgba(25, 135, 84, 0.1);
}

.members-join-mylifelockertrial .icon-circle-success i {
    color: #198754;
}

.members-join-mylifelockertrial .icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.members-join-mylifelockertrial .icon-circle-warning i {
    color: #ffc107;
}

.members-join-mylifelockertrial .icon-circle-info {
    background-color: rgba(13, 202, 240, 0.1);
}

.members-join-mylifelockertrial .icon-circle-info i {
    color: #0dcaf0;
}

.members-join-mylifelockertrial .hover-shadow {
    transition: all 0.2s ease-in-out;
}

.members-join-mylifelockertrial .hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

.members-join-mylifelockertrial .hover-shadow:focus,
.members-join-mylifelockertrial .hover-shadow:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.members-join-mylifelockertrial .transition-all {
    transition: all 0.2s ease-in-out;
}

.members-join-mylifelockertrial a.card {
    cursor: pointer;
}

.members-join-mylifelockertrial a.card:hover .card-title {
    color: #0d6efd !important;
}

.members-join-mylifelockertrial a.card:hover .icon-circle {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

.members-join-mylifelockertrial .card.border-success {
    border-width: 2px !important;
    border-color: #198754 !important;
}

.members-join-mylifelockertrial .card.border-warning {
    border-width: 2px !important;
    border-color: #ffc107 !important;
}

.members-join-mylifelockertrial .card-header.bg-success {
    background-color: #198754 !important;
    border-bottom: none;
}

.members-join-mylifelockertrial .card-header.bg-primary {
    background-color: #0d6efd !important;
    border-bottom: none;
}

.members-join-mylifelockertrial .card-header.bg-light {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
}

.members-join-mylifelockertrial .alert.border-start.border-success {
    background-color: #f8f9fa;
    border-color: #198754 !important;
}

.members-join-mylifelockertrial .btn-warning.text-dark {
    font-weight: 600;
}

.members-join-mylifelockertrial .btn-warning.text-dark:hover {
    background-color: #ffca2c;
    border-color: #ffc720;
}

.members-join-mylifelockertrial .btn-warning.text-dark:focus,
.members-join-mylifelockertrial .btn-warning.text-dark:focus-visible {
    outline: 2px solid #ffc107;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.members-join-mylifelockertrial .btn-outline-primary:focus,
.members-join-mylifelockertrial .btn-outline-primary:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.members-join-mylifelockertrial .btn-outline-secondary:focus,
.members-join-mylifelockertrial .btn-outline-secondary:focus-visible {
    outline: 2px solid #6c757d;
    outline-offset: 2px;
}

.members-join-mylifelockertrial .fa-5x {
    font-size: 5rem;
}

.members-join-mylifelockertrial .text-success {
    color: #198754 !important;
}

.members-join-mylifelockertrial .text-warning {
    color: #ffc107 !important;
}

.members-join-mylifelockertrial .text-danger {
    color: #dc3545 !important;
}

.members-join-mylifelockertrial .lead {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
}

.members-join-mylifelockertrial .card-title {
    font-weight: 600;
    color: #333;
    transition: color 0.2s ease-in-out;
}

.members-join-mylifelockertrial .card-text {
    line-height: 1.5;
}

.members-join-mylifelockertrial hr {
    border-top: 1px solid #dee2e6;
    opacity: 0.5;
}

/* Mobile responsive adjustments */
@media (max-width: 767.98px) {
    .members-join-mylifelockertrial .hero-title {
        font-size: 1.5rem;
    }

    .members-join-mylifelockertrial .hero-icon {
        display: none;
    }

    .members-join-mylifelockertrial .fa-5x {
        font-size: 3rem;
    }

    .members-join-mylifelockertrial .d-flex.align-items-start {
        flex-direction: column;
    }

    .members-join-mylifelockertrial .d-flex.align-items-start .ms-4 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .members-join-mylifelockertrial .d-flex.align-items-center .ms-4 {
        margin-left: 1rem !important;
    }

    .members-join-mylifelockertrial .icon-circle {
        width: 48px;
        height: 48px;
    }

    .members-join-mylifelockertrial .icon-circle i {
        font-size: 1rem;
    }

    .members-join-mylifelockertrial a.card.h-100.hover-shadow {
        min-height: auto !important;
    }

    .members-join-mylifelockertrial a.card.h-100.hover-shadow:active,
    .members-join-mylifelockertrial a.card.h-100.hover-shadow:focus,
    .members-join-mylifelockertrial a.card.h-100.hover-shadow:focus-visible {
        min-height: auto !important;
    }

    .members-join-mylifelockertrial .btn-lg {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .members-join-mylifelockertrial .hero-title {
        font-size: 1.25rem;
    }

    .members-join-mylifelockertrial .card-body {
        padding: 1rem !important;
    }

    .members-join-mylifelockertrial .lead {
        font-size: 1rem;
    }

    .members-join-mylifelockertrial .fa-5x {
        font-size: 2.5rem;
    }

    .members-join-mylifelockertrial .icon-circle {
        width: 40px;
        height: 40px;
    }

    .members-join-mylifelockertrial .icon-circle i {
        font-size: 0.875rem;
    }

    .members-join-mylifelockertrial .icon-circle-warning i {
        font-size: 1rem;
    }

    .members-join-mylifelockertrial a.card.h-100.hover-shadow {
        min-height: 160px !important;
    }

    .members-join-mylifelockertrial a.card.h-100.hover-shadow:active,
    .members-join-mylifelockertrial a.card.h-100.hover-shadow:focus,
    .members-join-mylifelockertrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 160px !important;
    }
}

/* =====================================================
   JOIN MYLIVINGWILLTRIAL PAGE STYLES
   ===================================================== */

.members-join-mylivingwilltrial .hero-section .card {
    border-radius: 0.5rem;
}

.members-join-mylivingwilltrial .hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
}

.members-join-mylivingwilltrial .hero-subtitle {
    font-size: 1rem;
    color: #666;
}

.members-join-mylivingwilltrial .hero-description {
    font-size: 1rem;
    color: #555;
}

.members-join-mylivingwilltrial .hero-icon {
    font-size: 4rem;
    color: rgba(0, 123, 255, 0.15);
}

.members-join-mylivingwilltrial .hero-icon i {
    color: rgba(0, 123, 255, 0.25);
}

.members-join-mylivingwilltrial .icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.members-join-mylivingwilltrial .icon-circle i {
    font-size: 1.25rem;
}

.members-join-mylivingwilltrial .icon-circle-primary {
    background-color: rgba(13, 110, 253, 0.1);
}

.members-join-mylivingwilltrial .icon-circle-primary i {
    color: #0d6efd;
}

.members-join-mylivingwilltrial .icon-circle-success {
    background-color: rgba(25, 135, 84, 0.1);
}

.members-join-mylivingwilltrial .icon-circle-success i {
    color: #198754;
}

.members-join-mylivingwilltrial .icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.members-join-mylivingwilltrial .icon-circle-warning i {
    color: #ffc107;
}

.members-join-mylivingwilltrial .icon-circle-info {
    background-color: rgba(13, 202, 240, 0.1);
}

.members-join-mylivingwilltrial .icon-circle-info i {
    color: #0dcaf0;
}

.members-join-mylivingwilltrial .hover-shadow {
    transition: all 0.2s ease-in-out;
}

.members-join-mylivingwilltrial .hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

.members-join-mylivingwilltrial .hover-shadow:focus,
.members-join-mylivingwilltrial .hover-shadow:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.members-join-mylivingwilltrial .transition-all {
    transition: all 0.2s ease-in-out;
}

.members-join-mylivingwilltrial a.card {
    cursor: pointer;
}

.members-join-mylivingwilltrial a.card:hover .card-title {
    color: #0d6efd !important;
}

.members-join-mylivingwilltrial a.card:hover .icon-circle {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

.members-join-mylivingwilltrial .card.border-success {
    border-width: 2px !important;
    border-color: #198754 !important;
}

.members-join-mylivingwilltrial .card.border-warning {
    border-width: 2px !important;
    border-color: #ffc107 !important;
}

.members-join-mylivingwilltrial .card-header.bg-success {
    background-color: #198754 !important;
    border-bottom: none;
}

.members-join-mylivingwilltrial .card-header.bg-primary {
    background-color: #0d6efd !important;
    border-bottom: none;
}

.members-join-mylivingwilltrial .card-header.bg-light {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
}

.members-join-mylivingwilltrial .alert.border-start.border-success {
    background-color: #f8f9fa;
    border-color: #198754 !important;
}

.members-join-mylivingwilltrial .btn-warning.text-dark {
    font-weight: 600;
}

.members-join-mylivingwilltrial .btn-warning.text-dark:hover {
    background-color: #ffca2c;
    border-color: #ffc720;
}

.members-join-mylivingwilltrial .btn-warning.text-dark:focus,
.members-join-mylivingwilltrial .btn-warning.text-dark:focus-visible {
    outline: 2px solid #ffc107;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.members-join-mylivingwilltrial .btn-outline-primary:focus,
.members-join-mylivingwilltrial .btn-outline-primary:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.members-join-mylivingwilltrial .btn-outline-secondary:focus,
.members-join-mylivingwilltrial .btn-outline-secondary:focus-visible {
    outline: 2px solid #6c757d;
    outline-offset: 2px;
}

.members-join-mylivingwilltrial .fa-5x {
    font-size: 5rem;
}

.members-join-mylivingwilltrial .text-success {
    color: #198754 !important;
}

.members-join-mylivingwilltrial .text-warning {
    color: #ffc107 !important;
}

.members-join-mylivingwilltrial .text-danger {
    color: #dc3545 !important;
}

.members-join-mylivingwilltrial .lead {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
}

.members-join-mylivingwilltrial .card-title {
    font-weight: 600;
    color: #333;
    transition: color 0.2s ease-in-out;
}

.members-join-mylivingwilltrial .card-text {
    line-height: 1.5;
}

.members-join-mylivingwilltrial hr {
    border-top: 1px solid #dee2e6;
    opacity: 0.5;
}

/* Mobile responsive adjustments */
@media (max-width: 767.98px) {
    .members-join-mylivingwilltrial .hero-title {
        font-size: 1.5rem;
    }

    .members-join-mylivingwilltrial .hero-icon {
        display: none;
    }

    .members-join-mylivingwilltrial .fa-5x {
        font-size: 3rem;
    }

    .members-join-mylivingwilltrial .d-flex.align-items-start {
        flex-direction: column;
    }

    .members-join-mylivingwilltrial .d-flex.align-items-start .ms-4 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .members-join-mylivingwilltrial .d-flex.align-items-center .ms-4 {
        margin-left: 1rem !important;
    }

    .members-join-mylivingwilltrial .icon-circle {
        width: 48px;
        height: 48px;
    }

    .members-join-mylivingwilltrial .icon-circle i {
        font-size: 1rem;
    }

    .members-join-mylivingwilltrial a.card.h-100.hover-shadow {
        min-height: auto !important;
    }

    .members-join-mylivingwilltrial a.card.h-100.hover-shadow:active,
    .members-join-mylivingwilltrial a.card.h-100.hover-shadow:focus,
    .members-join-mylivingwilltrial a.card.h-100.hover-shadow:focus-visible {
        min-height: auto !important;
    }

    .members-join-mylivingwilltrial .btn-lg {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .members-join-mylivingwilltrial .hero-title {
        font-size: 1.25rem;
    }

    .members-join-mylivingwilltrial .card-body {
        padding: 1rem !important;
    }

    .members-join-mylivingwilltrial .lead {
        font-size: 1rem;
    }

    .members-join-mylivingwilltrial .fa-5x {
        font-size: 2.5rem;
    }

    .members-join-mylivingwilltrial .icon-circle {
        width: 40px;
        height: 40px;
    }

    .members-join-mylivingwilltrial .icon-circle i {
        font-size: 0.875rem;
    }

    .members-join-mylivingwilltrial .icon-circle-warning i {
        font-size: 1rem;
    }

    .members-join-mylivingwilltrial a.card.h-100.hover-shadow {
        min-height: 160px !important;
    }

    .members-join-mylivingwilltrial a.card.h-100.hover-shadow:active,
    .members-join-mylivingwilltrial a.card.h-100.hover-shadow:focus,
    .members-join-mylivingwilltrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 160px !important;
    }
}

/* =====================================================
   JOIN MYMESSAGESTRIAL PAGE STYLES
   ===================================================== */

.members-join-mymessagestrial .hero-section .card {
    border-radius: 0.5rem;
}

.members-join-mymessagestrial .hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
}

.members-join-mymessagestrial .hero-subtitle {
    font-size: 1rem;
    color: #666;
}

.members-join-mymessagestrial .hero-description {
    font-size: 1rem;
    color: #555;
}

.members-join-mymessagestrial .hero-icon {
    font-size: 4rem;
    color: rgba(0, 123, 255, 0.15);
}

.members-join-mymessagestrial .hero-icon i {
    color: rgba(0, 123, 255, 0.25);
}

.members-join-mymessagestrial .icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.members-join-mymessagestrial .icon-circle i {
    font-size: 1.25rem;
}

.members-join-mymessagestrial .icon-circle-primary {
    background-color: rgba(13, 110, 253, 0.1);
}

.members-join-mymessagestrial .icon-circle-primary i {
    color: #0d6efd;
}

.members-join-mymessagestrial .icon-circle-success {
    background-color: rgba(25, 135, 84, 0.1);
}

.members-join-mymessagestrial .icon-circle-success i {
    color: #198754;
}

.members-join-mymessagestrial .icon-circle-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.members-join-mymessagestrial .icon-circle-warning i {
    color: #ffc107;
}

.members-join-mymessagestrial .icon-circle-info {
    background-color: rgba(13, 202, 240, 0.1);
}

.members-join-mymessagestrial .icon-circle-info i {
    color: #0dcaf0;
}

.members-join-mymessagestrial .hover-shadow {
    transition: all 0.2s ease-in-out;
}

.members-join-mymessagestrial .hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

.members-join-mymessagestrial .hover-shadow:focus,
.members-join-mymessagestrial .hover-shadow:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.members-join-mymessagestrial .transition-all {
    transition: all 0.2s ease-in-out;
}

.members-join-mymessagestrial a.card {
    cursor: pointer;
}

.members-join-mymessagestrial a.card:hover .card-title {
    color: #0d6efd !important;
}

.members-join-mymessagestrial a.card:hover .icon-circle {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

.members-join-mymessagestrial .card.border-success {
    border-width: 2px !important;
    border-color: #198754 !important;
}

.members-join-mymessagestrial .card.border-warning {
    border-width: 2px !important;
    border-color: #ffc107 !important;
}

.members-join-mymessagestrial .card-header.bg-success {
    background-color: #198754 !important;
    border-bottom: none;
}

.members-join-mymessagestrial .card-header.bg-primary {
    background-color: #0d6efd !important;
    border-bottom: none;
}

.members-join-mymessagestrial .card-header.bg-light {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
}

.members-join-mymessagestrial .alert.border-start.border-success {
    background-color: #f8f9fa;
    border-color: #198754 !important;
}

.members-join-mymessagestrial .btn-warning.text-dark {
    font-weight: 600;
}

.members-join-mymessagestrial .btn-warning.text-dark:hover {
    background-color: #ffca2c;
    border-color: #ffc720;
}

.members-join-mymessagestrial .btn-warning.text-dark:focus,
.members-join-mymessagestrial .btn-warning.text-dark:focus-visible {
    outline: 2px solid #ffc107;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.members-join-mymessagestrial .btn-outline-primary:focus,
.members-join-mymessagestrial .btn-outline-primary:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.members-join-mymessagestrial .btn-outline-secondary:focus,
.members-join-mymessagestrial .btn-outline-secondary:focus-visible {
    outline: 2px solid #6c757d;
    outline-offset: 2px;
}

.members-join-mymessagestrial .fa-5x {
    font-size: 5rem;
}

.members-join-mymessagestrial .text-success {
    color: #198754 !important;
}

.members-join-mymessagestrial .text-warning {
    color: #ffc107 !important;
}

.members-join-mymessagestrial .text-danger {
    color: #dc3545 !important;
}

.members-join-mymessagestrial .lead {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
}

.members-join-mymessagestrial .card-title {
    font-weight: 600;
    color: #333;
    transition: color 0.2s ease-in-out;
}

.members-join-mymessagestrial .card-text {
    line-height: 1.5;
}

.members-join-mymessagestrial hr {
    border-top: 1px solid #dee2e6;
    opacity: 0.5;
}

/* Mobile responsive adjustments */
@media (max-width: 767.98px) {
    .members-join-mymessagestrial .hero-title {
        font-size: 1.5rem;
    }

    .members-join-mymessagestrial .hero-icon {
        display: none;
    }

    .members-join-mymessagestrial .fa-5x {
        font-size: 3rem;
    }

    .members-join-mymessagestrial .d-flex.align-items-start {
        flex-direction: column;
    }

    .members-join-mymessagestrial .d-flex.align-items-start .ms-4 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .members-join-mymessagestrial .d-flex.align-items-center .ms-4 {
        margin-left: 1rem !important;
    }

    .members-join-mymessagestrial .icon-circle {
        width: 48px;
        height: 48px;
    }

    .members-join-mymessagestrial .icon-circle i {
        font-size: 1rem;
    }

    .members-join-mymessagestrial a.card.h-100.hover-shadow {
        min-height: auto !important;
    }

    .members-join-mymessagestrial a.card.h-100.hover-shadow:active,
    .members-join-mymessagestrial a.card.h-100.hover-shadow:focus,
    .members-join-mymessagestrial a.card.h-100.hover-shadow:focus-visible {
        min-height: auto !important;
    }

    .members-join-mymessagestrial .btn-lg {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .members-join-mymessagestrial .hero-title {
        font-size: 1.25rem;
    }

    .members-join-mymessagestrial .card-body {
        padding: 1rem !important;
    }

    .members-join-mymessagestrial .lead {
        font-size: 1rem;
    }

    .members-join-mymessagestrial .fa-5x {
        font-size: 2.5rem;
    }

    .members-join-mymessagestrial .icon-circle {
        width: 40px;
        height: 40px;
    }

    .members-join-mymessagestrial .icon-circle i {
        font-size: 0.875rem;
    }

    .members-join-mymessagestrial .icon-circle-warning i {
        font-size: 1rem;
    }

    .members-join-mymessagestrial a.card.h-100.hover-shadow {
        min-height: 160px !important;
    }

    .members-join-mymessagestrial a.card.h-100.hover-shadow:active,
    .members-join-mymessagestrial a.card.h-100.hover-shadow:focus,
    .members-join-mymessagestrial a.card.h-100.hover-shadow:focus-visible {
        min-height: 160px !important;
    }
}

/* ==========================================================================
   WCAG 2.2 AA fix for wizard help sidebar accordion buttons
   Ensures text is visible and meets 4.5:1 contrast ratio against dark teal background
   ========================================================================== */

/* Target the accordion buttons with high specificity to override MDB/Bootstrap */
.tellmemorefaq .accordion .accordion-item .accordion-header .accordion-button,
.tellmemorefaq .accordion .accordion-item .accordion-header .accordion-button.btn,
.tellmemorefaq .accordion .accordion-item .accordion-header .accordion-button.btn-link,
.tellmemorefaq .accordion .accordion-item .accordion-header .accordion-button.btn.btn-link,
.tellmemorefaq .accordion .accordion-item .accordion-header .accordion-button.btn.btn-link.collapsed,
.left_faq_section .accordion .accordion-item .accordion-header .accordion-button,
.left_faq_section .accordion .accordion-item .accordion-header .accordion-button.btn,
.left_faq_section .accordion .accordion-item .accordion-header .accordion-button.btn-link,
.left_faq_section .accordion .accordion-item .accordion-header .accordion-button.btn.btn-link,
.left_faq_section .accordion .accordion-item .accordion-header .accordion-button.btn.btn-link.collapsed,
#TellMeMoreContent .accordion-button,
#TellMeMoreContent .accordion-button.btn-link,
#TellMeMoreContent .btn-link {
    color: #ffffff !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

    .tellmemorefaq .accordion-button:hover,
    .tellmemorefaq .accordion-button:focus,
    .tellmemorefaq .btn-link:hover,
    .tellmemorefaq .btn-link:focus,
    .left_faq_section .accordion-button:hover,
    .left_faq_section .accordion-button:focus,
    .left_faq_section .btn-link:hover,
    .left_faq_section .btn-link:focus,
    #TellMeMoreContent .accordion-button:hover,
    #TellMeMoreContent .accordion-button:focus,
    #TellMeMoreContent .btn-link:hover,
    #TellMeMoreContent .btn-link:focus {
        color: #ffd700 !important;
        text-decoration: underline !important;
    }

/* Accordion body text */
.tellmemorefaq .accordion-body,
.tellmemorefaq .accordion-body p,
.left_faq_section .accordion-body,
.left_faq_section .accordion-body p,
#TellMeMoreContent .accordion-body,
#TellMeMoreContent .accordion-body p {
    color: #ffffff !important;
}

/* Heading */
.tellmemorefaq h4,
.left_faq_section h4,
#TellMeMoreContent h4 {
    color: #ffffff !important;
}

/* Accordion item borders for visibility */
.tellmemorefaq .accordion-item,
.left_faq_section .accordion-item,
#TellMeMoreContent .accordion-item {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-color: transparent !important;
}

/* Plus/minus icon (::after pseudo-element) */
.tellmemorefaq .accordion-button::after,
.left_faq_section .accordion-button::after,
#TellMeMoreContent .accordion-button::after {
    filter: brightness(0) invert(1) !important; /* Makes the icon white */
}

/* ==========================================================================
   MySecurity - Delay Control (hours/days toggle)
   ========================================================================== */
.security-delay-control {
    display: flex;
    align-items: center;
}

.security-delay-control .security-delay-number {
    width: 80px !important;
    text-align: center;
    border-radius: 0.375rem 0 0 0.375rem;
    border-right: none;
    flex-shrink: 0;
}

.security-delay-control .security-delay-toggle {
    display: flex;
    flex-shrink: 0;
}

.security-delay-control .security-delay-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.security-delay-control .security-delay-toggle label {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4D5149;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-left: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    margin: 0;
    line-height: 1.5;
    white-space: nowrap;
}

.security-delay-control .security-delay-toggle label:last-of-type {
    border-radius: 0 0.375rem 0.375rem 0;
}

.security-delay-control .security-delay-toggle input[type="radio"]:checked + label {
    background-color: #006E7B;
    color: #ffffff;
    border-color: #006E7B;
}

.security-delay-control .security-delay-toggle input[type="radio"]:focus + label {
    box-shadow: 0 0 0 0.2rem rgba(0, 110, 123, 0.25);
    z-index: 1;
    position: relative;
}

@media (max-width: 575.98px) {
    .security-delay-control .security-delay-number {
        width: 65px !important;
    }

    .security-delay-control .security-delay-toggle label {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* ==========================================================================
   MySecurity - Service Cards (responsive layout)
   ========================================================================== */
.security-service-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    background-color: #fff;
}

.security-service-card:nth-child(even) {
    background-color: #f8f9fa;
}

.security-service-icon {
    min-width: 90px;
}

.security-service-icon img {
    max-width: 70px;
    height: auto;
}

.security-service-name {
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.security-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.security-status-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.security-status-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.security-status-option img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.security-status-option .form-check {
    margin-bottom: 0;
}

.security-status-option a {
    font-size: 0.8125rem;
}

@media (max-width: 991.98px) {
    .security-service-card .security-section-label {
        margin-top: 1rem;
    }

    .security-service-icon {
        margin-bottom: 0.5rem;
    }
}

/* Couple account note - add clearance for the steps_icon positioned above member_info on mobile */
@media only screen and (max-width: 575.98px) {
    .couple-account-note {
        margin-bottom: 3.5rem;
    }
}

/* =====================================================
   RestrictMyWillUntilReviewed feature
   Scoped to the MyWill release-restriction alert on
   mywill.aspx, printandship.aspx, bluenotary.aspx and the
   affiliate read-only badge on myreferencecode.aspx.
   All colours from the approved brand palette in CLAUDE.md.
   ===================================================== */
.mywill-review-restriction {
    border-left: 4px solid #E19717; /* brand orange */
}

.mywill-review-restriction .alert-heading {
    color: #4D5149; /* brand dark */
    font-weight: 600;
}

/* Read-only badge on myreferencecode.aspx affiliate card */
.badge.badge-restriction {
    background-color: #D9CFCB; /* brand stone */
    color: #3C3C3B; /* brand dark */
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    white-space: normal;
    text-align: left;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
}

/* MyReferenceCode (members/ and fr/members/myreferencecode.aspx, inside .pw-refcode): MDB's info (#54B4D3), secondary
   (#9FA6B2), and success (#14A44D) colours fall short of AA with white text, or as text on white or the card footer's
   grey, so the discount badge, the second language's description label, the Edit dialog's help text and commission
   amount, the two information cards' headers, and the Landing Page and Links & Banners buttons use brand colours instead.
   (The commission badge's .bg-success already passes: Redesign.css darkens it site-wide.) */
.pw-refcode .badge.bg-info {
    background-color: #006E7B !important; /* brand teal */
}
.pw-refcode .text-info,
.pw-refcode .text-success {
    color: #006E7B !important;
}
.pw-refcode .card-header.bg-info,
.pw-refcode .card-header.bg-secondary {
    background-color: #3A5469 !important; /* brand slate */
}
.pw-refcode .btn-outline-success,
.pw-refcode .btn-outline-info {
    --mdb-btn-color: #006E7B;
    --mdb-btn-hover-color: #006E7B;
    --mdb-btn-focus-color: #006E7B;
    --mdb-btn-active-color: #006E7B;
    --mdb-btn-hover-bg: #FFFFFF;
    --mdb-btn-focus-bg: #FFFFFF;
    --mdb-btn-active-bg: #FFFFFF;
    --mdb-btn-focus-shadow-rgb: 0, 110, 123;
    --mdb-btn-outline-border-color: #006E7B;
    --mdb-btn-outline-hover-border-color: #3A5469;
    --mdb-btn-outline-focus-border-color: #3A5469;
    --mdb-btn-outline-active-border-color: #3A5469;
    --mdb-btn-active-border-color: #3A5469;
}

/* WCAG 2.2 AA: disabled release buttons get a not-allowed cursor */
.btn.disabled[aria-disabled="true"],
.btn:disabled {
    cursor: not-allowed;
}

/* ==========================================================================
   Executor Notification Card (mywill_executor / myexpatwill_executor)
   Used by the "Notify my Executor" opt-in card inside each Executor panel.
   ========================================================================== */
.pw-notify-executor-card {
    background: #ffffff;
    border: 1px solid #D9CFCB;
    border-left: 4px solid #D9CFCB;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(60, 60, 59, 0.08);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.pw-notify-executor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.pw-notify-executor-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.pw-notify-executor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #006E7B;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pw-notify-executor-title {
    color: #3C3C3B;
    font-weight: 600;
    margin: 0.25rem 0 0.25rem;
}

.pw-notify-executor-subtitle {
    color: #4D5149;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Enabled state: accent shift so active Executor notifications stand out */
.pw-notify-executor-card.is-enabled {
    border-left-color: #008AA0;
    background: #f6fbfc;
}

/* Preview Email link: always interactive, sits on its own row below the subtitle */
.pw-notify-executor-preview-row {
    margin-bottom: 1rem;
}

.pw-notify-executor-preview {
    color: #006E7B;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.pw-notify-executor-preview:hover,
.pw-notify-executor-preview:focus {
    color: #3A5469;
    text-decoration: underline;
}

/* Custom toggle switch (replaces the MDB form-switch that rendered poorly).
   The underlying checkbox is invisible (opacity 0, over the track); all click handling and state updates are
   driven by JavaScript (InitNotifyExecutorCards in ClientFunctions.js) which toggles
   the .is-enabled class on the parent .pw-notify-executor-card. The track's visual
   state is driven purely by that class. */
.pw-notify-switch {
    display: inline-block;
    position: relative;
    width: 3rem;
    height: 1.625rem;
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pw-notify-switch__input {
    /* Invisible but in the keyboard order: with display:none no keyboard could reach the switch, so Notify could not be
       turned on without a mouse. JS still toggles its .checked property (a click on the label, or Space here) so the value
       submits. It takes no clicks itself: the label's click handler expects the click on the label, and a click on the
       input would be toggled twice. :focus-within below draws its focus ring on the track */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.pw-notify-switch__track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c4b9b5;
    border: 1px solid #a8a09c;
    border-radius: 999px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    pointer-events: none;
}

.pw-notify-switch__track::before {
    content: '';
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(60, 60, 59, 0.35);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ON state: driven by the .is-enabled class on the parent card (set by JS) */
.pw-notify-executor-card.is-enabled .pw-notify-switch__track {
    background: #008AA0;
    border-color: #006E7B;
}

.pw-notify-executor-card.is-enabled .pw-notify-switch__track::before {
    transform: translateX(1.375rem);
}

.pw-notify-switch:hover .pw-notify-switch__track {
    border-color: #7d7672;
}

.pw-notify-executor-card.is-enabled .pw-notify-switch:hover .pw-notify-switch__track {
    border-color: #008AA0;
}

.pw-notify-switch:focus-within .pw-notify-switch__track {
    outline: 2px solid #008AA0;
    outline-offset: 2px;
}

/* Body: always visible but greyed out when toggle is off */
.pw-notify-executor-body {
    transition: opacity 0.25s ease, filter 0.25s ease;
    padding-top: 0.5rem;
}

.pw-notify-executor-card:not(.is-enabled) .pw-notify-executor-body {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(70%);
    border-top: 1px dashed #D9CFCB;
    margin-top: 0.75rem;
    padding-top: 1rem;
}

.pw-notify-executor-card:not(.is-enabled) .pw-notify-executor-body .form-control,
.pw-notify-executor-card:not(.is-enabled) .pw-notify-executor-body .form-check-input {
    background-color: #f4f1ef;
}

.pw-notify-executor-privacy {
    background: #f4f1ef;
    border-radius: 0.375rem;
    padding: 1rem 1.1rem;
    margin-top: 0.5rem;
}

.pw-notify-executor-privacy-label {
    color: #3A5469;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

/* ============================================================================
   Member Statistics Report - Chart cards, canvases, data-table toggles
   ============================================================================ */

.pw-chart-card {
    background-color: #ffffff;
    border: 1px solid rgba(77, 81, 73, 0.15);
    border-radius: 10px;
    padding: 1.25rem 1.25rem 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(60, 60, 59, 0.06);
}

.pw-chart-card h4 {
    color: #3C3C3B;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    text-align: center;
}

.pw-chart-canvas-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.pw-chart-canvas-wrapper.pw-h-260 { height: 260px; }
.pw-chart-canvas-wrapper.pw-h-280 { height: 280px; }
.pw-chart-canvas-wrapper.pw-h-300 { height: 300px; }
.pw-chart-canvas-wrapper.pw-h-320 { height: 320px; }
.pw-chart-canvas-wrapper.pw-h-360 { height: 360px; }
.pw-chart-canvas-wrapper.pw-h-380 { height: 380px; }
.pw-chart-canvas-wrapper.pw-h-400 { height: 400px; }
.pw-chart-canvas-wrapper.pw-h-420 { height: 420px; }
.pw-chart-canvas-wrapper.pw-h-440 { height: 440px; }
.pw-chart-canvas-wrapper.pw-h-500 { height: 500px; }
.pw-chart-canvas-wrapper.pw-h-600 { height: 600px; }

.pw-chart-canvas-wrapper canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

.pw-chart-circular-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    aspect-ratio: 1;
    max-width: 100%;
}

.pw-chart-grid-2,
.pw-chart-grid-3 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* Grid items default to min-width:auto and min-height:auto, which lets a Chart.js canvas push the row beyond its intended size; reset so the wrapper's explicit height is authoritative. */
.pw-chart-grid-2 > div,
.pw-chart-grid-3 > div {
    min-width: 0;
    min-height: 0;
}

@media (min-width: 768px) {
    .pw-chart-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pw-chart-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .pw-chart-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pw-chart-caption {
    display: block;
    color: #4D5149;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 0.25rem;
}

.pw-data-table-toggle-wrapper {
    text-align: right;
    margin: 0.5rem 0 0.75rem;
}

.pw-data-table-toggle {
    background-color: transparent;
    border: 1px solid #008AA0;
    color: #008AA0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pw-data-table-toggle:hover {
    background-color: #008AA0;
    color: #ffffff;
}

.pw-data-table-toggle:focus-visible {
    background-color: #008AA0;
    color: #ffffff;
    outline: 3px solid #E19717;
    outline-offset: 2px;
}

.pw-data-table-collapsed {
    display: none;
}

.pw-chart-section-intro {
    color: #4D5149;
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.pw-notify-executor-privacy p {
    color: #4D5149;
    font-size: 0.88rem;
    margin-bottom: 0.8rem;
}

/* ============================================================================
   Administrator Sales Dashboard - top-of-page combo chart for full Admins
   ============================================================================ */

.pw-admin-sales-chart {
    margin-top: 1.5rem;
    padding-top: 1.75rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .pw-admin-sales-chart {
        margin-top: 2rem;
        padding-top: 2.25rem;
    }
}

.pw-admin-sales-card.pw-chart-card {
    background: linear-gradient(135deg, #ffffff 0%, #f5f1ef 100%);
    border: 1px solid rgba(0, 138, 160, 0.22);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1rem;
    box-shadow: 0 6px 22px rgba(60, 60, 59, 0.10);
    position: relative;
    overflow: hidden;
}

/* Loading overlay shown while a site-selector click is navigating the page. */
.pw-admin-sales-spinner-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 16px;
    z-index: 20;
}

.pw-admin-sales-card.pw-admin-sales-loading .pw-admin-sales-spinner-overlay {
    display: flex;
}

.pw-admin-sales-card.pw-admin-sales-loading .pw-admin-sales-site-btn {
    pointer-events: none;
    opacity: 0.55;
}

.pw-admin-sales-card.pw-admin-sales-loading {
    cursor: progress;
}

.pw-admin-sales-spinner {
    width: 64px;
    height: 64px;
    border: 5px solid rgba(0, 138, 160, 0.18);
    border-top-color: #008AA0;
    border-radius: 50%;
    animation: pwAdminSalesSpin 0.85s linear infinite;
}

@keyframes pwAdminSalesSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pw-admin-sales-spinner {
        animation-duration: 2s;
    }
}

.pw-admin-sales-card.pw-chart-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #008AA0 0%, #E19717 50%, #3A5469 100%);
}

.pw-admin-sales-header {
    text-align: left;
    margin-bottom: 1.25rem;
}

.pw-admin-sales-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #008AA0;
    margin-bottom: 0.25rem;
}

.pw-admin-sales-title {
    color: #3C3C3B;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.pw-admin-sales-subtitle {
    color: #4D5149;
    font-size: 0.9rem;
    font-weight: 500;
}

.pw-admin-sales-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .pw-admin-sales-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.pw-admin-sales-kpi {
    background-color: #ffffff;
    border: 1px solid rgba(77, 81, 73, 0.12);
    border-left: 4px solid #D9CFCB;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pw-admin-sales-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #4D5149;
    text-transform: uppercase;
}

.pw-admin-sales-kpi-value {
    color: #3C3C3B;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.pw-admin-sales-kpi-revenue { border-left-color: #4D5149; }
.pw-admin-sales-kpi-revenue .pw-admin-sales-kpi-value { color: #006E7B; }

.pw-admin-sales-kpi-new { border-left-color: #008AA0; }
.pw-admin-sales-kpi-ext { border-left-color: #E19717; }
.pw-admin-sales-kpi-other { border-left-color: #3A5469; }

.pw-admin-sales-site-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

.pw-admin-sales-site-btn {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(77, 81, 73, 0.25);
    border-radius: 999px;
    background-color: #ffffff;
    color: #4D5149;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.2;
}

.pw-admin-sales-site-btn:hover,
.pw-admin-sales-site-btn:focus-visible {
    border-color: #008AA0;
    color: #006E7B;
    background-color: #ffffff;
    text-decoration: none;
}

.pw-admin-sales-site-btn:focus-visible {
    outline: 3px solid #E19717;
    outline-offset: 2px;
}

.pw-admin-sales-site-btn-active,
.pw-admin-sales-site-btn-active:hover,
.pw-admin-sales-site-btn-active:focus-visible {
    background-color: #008AA0;
    border-color: #006E7B;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 138, 160, 0.25);
}

.pw-admin-sales-legend {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.25rem;
}

.pw-admin-sales-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #3C3C3B;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
}

.pw-admin-sales-legend-swatch {
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.pw-admin-sales-legend-swatch-bar {
    width: 22px;
    height: 14px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
}

.pw-admin-sales-legend-swatch-line {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    align-self: center;
}

.pw-admin-sales-legend-swatch-line-dashed {
    width: 28px;
    height: 0;
    border: 0;
    border-top: 2.5px dashed #DC2626;
    border-radius: 0;
    align-self: center;
    background-color: transparent;
}

.pw-admin-sales-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.pw-admin-sales-kpi-delta-arrow {
    font-size: 0.75rem;
    line-height: 1;
}

.pw-admin-sales-kpi-delta-up { color: #006E7B; }
/* Down color matches the chart's gross-sales line (#DC2626), which deliberately sits outside the
   brand palette for contrast. Reusing it here keeps "negative change" visually consistent with
   the comparison line on the chart. */
.pw-admin-sales-kpi-delta-down { color: #DC2626; }
.pw-admin-sales-kpi-delta-flat { color: #4D5149; }
.pw-admin-sales-kpi-delta-new { color: #4D5149; font-style: italic; }

@media (min-width: 768px) {
    .pw-admin-sales-card.pw-chart-card { padding: 1.75rem 1.75rem 1.25rem; }
    .pw-admin-sales-title { font-size: 1.6rem; }
}

/* Mobile tweaks for the Executive Dashboard. The chart itself switches to 5
   weekly buckets at this breakpoint (via pwAggregateWeeklyIfNarrow in
   MembersFunctions.js); here we also tighten the surrounding chrome so the
   legend and card padding don't crowd out the chart area on narrow screens. */
@media (max-width: 767px) {
    .pw-admin-sales-card.pw-chart-card { padding: 1rem 0.9rem 0.75rem; }
    .pw-admin-sales-title { font-size: 1.15rem; }
    .pw-admin-sales-subtitle { font-size: 0.8rem; }
    .pw-admin-sales-kpi { padding: 0.6rem 0.75rem; }
    .pw-admin-sales-kpi-label { font-size: 0.68rem; }
    .pw-admin-sales-kpi-value { font-size: 1.15rem; }
    .pw-admin-sales-kpi-delta { font-size: 0.7rem; }
    .pw-admin-sales-legend {
        gap: 0.35rem 0.75rem;
        margin: 0 0 0.75rem;
    }
    .pw-admin-sales-legend-item { font-size: 0.78rem; }
    .pw-admin-sales-legend-swatch-bar { width: 16px; height: 10px; }
    .pw-admin-sales-legend-swatch-line,
    .pw-admin-sales-legend-swatch-line-dashed { width: 18px; }
    .pw-admin-sales-site-btn { font-size: 0.78rem; padding: 0.35rem 0.75rem; }
}

/* Phone-width tweaks (below Bootstrap's 'sm' breakpoint). On these viewports
   the card previously felt cramped because the 420px chart wrapper, 2x2 KPI
   grid, and 8-item vertical legend each claimed a full viewport's worth of
   height. Here we tighten everything further, hide the 4 prior-year legend
   entries (their faded/dashed styling plus the "vs. last year" KPI deltas
   make the intent self-evident), and shorten the canvas to 260px so the
   chart stays in the visible screen without forcing long scrolls. */
@media (max-width: 575px) {
    .pw-admin-sales-card.pw-chart-card { padding: 0.75rem 0.6rem 0.5rem; }
    .pw-admin-sales-eyebrow { font-size: 0.7rem; }
    .pw-admin-sales-title { font-size: 1rem; line-height: 1.25; }
    .pw-admin-sales-subtitle { font-size: 0.72rem; }
    .pw-admin-sales-header { margin-bottom: 0.75rem; }
    .pw-admin-sales-site-selector { gap: 0.3rem; margin: 0 0 0.75rem; }
    .pw-admin-sales-site-btn { font-size: 0.7rem; padding: 0.25rem 0.55rem; }
    .pw-admin-sales-kpis { gap: 0.5rem; }
    .pw-admin-sales-kpi { padding: 0.45rem 0.55rem; border-left-width: 3px; }
    .pw-admin-sales-kpi-label { font-size: 0.6rem; }
    .pw-admin-sales-kpi-value { font-size: 0.95rem; }
    .pw-admin-sales-kpi-delta { font-size: 0.62rem; }
    /* Drop the chart canvas and its legend on narrow phones. MDB's Chart.js
       bundle reserves ~100px at the top of the canvas for the suppressed
       legend box and strips the axis max/offset config we'd need to make
       the plot read well in the remaining pixels, so below 'sm' we'd be
       shipping a visually broken chart either way. The KPI tiles above
       already communicate the 30-day totals AND the year-over-year deltas,
       so an exec glancing at the dashboard on a phone still gets the full
       story; the chart returns at >=576px where the plot has room to breathe. */
    .pw-admin-sales-legend { display: none; }
    .pw-chart-canvas-wrapper { display: none; }
}

.executorlogo {
    max-height: 200px;
    max-width: 200px;
}

/* ============================================================
 * MyTeam service - split-pane card hierarchy
 * Used by /members/myteam.aspx and /members/myteam_search.aspx
 * (and /fr/members/ mirrors). Members area serves unpurged CSS,
 * so no PurgeCSS safelist is needed.
 * ============================================================ */
.mt-page {
    --mt-teal: #008AA0;
    --mt-teal-deep: #006E7B;
    --mt-ochre: #E19717;
    --mt-ochre-deep: #A66800;
    --mt-slate: #3A5469;
    --mt-ink: #3C3C3B;
    --mt-paper: #FFFFFF;
    --mt-page-bg: #F7F4F1;
    --mt-rule: #D9CFCB;
    --mt-rule-soft: rgba(217, 207, 203, 0.55);
    --mt-shadow-card: 0 1px 0 rgba(60, 60, 59, 0.04), 0 12px 28px -16px rgba(60, 60, 59, 0.18);
    --mt-shadow-card-hover: 0 1px 0 rgba(60, 60, 59, 0.04), 0 18px 36px -18px rgba(60, 60, 59, 0.28);
    color: var(--mt-ink);
}

.mt-page__header {
    margin-bottom: 1.75rem;
}

.mt-page__title {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mt-ink);
    margin-bottom: 0.25rem;
}

.mt-page__title sup {
    font-size: 0.5em;
    vertical-align: super;
    color: var(--mt-slate);
}

.mt-page__subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: var(--mt-slate);
    display: inline;
}

.mt-page__lede {
    color: var(--mt-slate);
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 70ch;
}

.mt-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mt-slate);
    margin: 0 0 0.75rem 0;
}

.mt-breadcrumb {
    margin-top: 0.75rem;
}

.mt-breadcrumb__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--mt-slate);
}

.mt-breadcrumb__item {
    display: inline-flex;
    align-items: center;
}

.mt-breadcrumb__separator {
    margin: 0 0.5rem;
    color: var(--mt-rule);
}

.mt-breadcrumb__link {
    color: var(--mt-teal);
    text-decoration: none;
}

.mt-breadcrumb__link:hover {
    color: var(--mt-teal-deep);
    text-decoration: underline;
}

.mt-privacy {
    margin-bottom: 1.5rem;
}

.mt-privacy__alert {
    border-left: 3px solid var(--mt-ochre);
}

/* Roll-up stats grid */
.mt-rollup {
    background: var(--mt-paper);
    border: 1px solid var(--mt-rule);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--mt-shadow-card);
}

.mt-rollup__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem 1.5rem;
}

.mt-rollup__stat {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0;
}

.mt-rollup__value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mt-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mt-rollup__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mt-slate);
    margin-top: 0.125rem;
}

/* Grouped roll-up stats: 3 sections (Team, Client status, Client activity) with
   accent-colored left rules to convey which numbers belong together. The Team
   section's "total accounts" is the parent stat (rendered larger), with managers/
   professionals/clients beneath as its breakdown. The Client groups carry an
   ochre rule to mark them as client-scoped metrics. */
.mt-rollup__groups {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .mt-rollup__groups {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.mt-rollup__group {
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--mt-rule);
    min-width: 0;
}

.mt-rollup__group--team {
    border-left-color: var(--mt-teal);
}

.mt-rollup__group--clients {
    border-left-color: var(--mt-ochre);
}

.mt-rollup__group-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mt-slate);
    margin: 0 0 0.5rem;
}

.mt-rollup__stat--hero .mt-rollup__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mt-teal-deep);
}

.mt-rollup__stat--hero .mt-rollup__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mt-ink);
}

.mt-rollup__breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.25rem;
    margin-top: 0.625rem;
}

.mt-rollup__breakdown .mt-rollup__value {
    font-size: 1.125rem;
}

.mt-rollup__breakdown .mt-rollup__label {
    font-size: 0.75rem;
}

/* Toolbar (view tabs + actions) */
.mt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mt-rule);
}

.mt-toolbar--search {
    border-bottom: none;
    padding-top: 0.5rem;
    margin-top: 1rem;
}

.mt-tabs {
    display: inline-flex;
    background: var(--mt-paper);
    border: 1px solid var(--mt-rule);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.mt-tab {
    border: 0;
    background: transparent;
    color: var(--mt-slate);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}

.mt-tab:hover {
    color: var(--mt-ink);
}

.mt-tab--active {
    background: var(--mt-teal-deep);
    color: #FFFFFF;
}

.mt-tab--active:hover {
    color: #FFFFFF;
}

.mt-tab:focus-visible,
.mt-card:focus-visible,
.mt-icon-btn:focus-visible,
.mt-action-menu__item:focus-visible {
    outline: 3px solid var(--mt-teal);
    outline-offset: 2px;
}

.mt-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mt-btn {
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mt-btn-link {
    color: var(--mt-slate);
    font-size: 0.8125rem;
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.mt-btn-link:hover {
    color: var(--mt-teal);
    text-decoration: underline;
}

/* Empty state */
.mt-empty {
    background: var(--mt-paper);
    border: 1px dashed var(--mt-rule);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--mt-slate);
}

.mt-empty__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mt-ink);
    margin-bottom: 0.5rem;
}

.mt-empty__body {
    font-size: 0.9375rem;
    color: var(--mt-slate);
}

/* Tree container (formerly a split pane with a context panel; the right pane was removed
   because it duplicated the card content. Class names kept for back-compat with existing
   selectors.) */
.mt-split {
    display: block;
}

.mt-split__left {
    min-width: 0;
}

/* Card */
.mt-card-wrap {
    position: relative;
    margin-left: 0;
}

.mt-card-wrap[data-mt-depth="2"] { padding-left: 28px; }
.mt-card-wrap[data-mt-depth="3"] { padding-left: 56px; }
.mt-card-wrap[data-mt-depth="4"] { padding-left: 84px; }
.mt-card-wrap[data-mt-depth="5"] { padding-left: 112px; }
.mt-card-wrap[data-mt-depth="6"] { padding-left: 140px; }
.mt-card-wrap[data-mt-depth="7"] { padding-left: 168px; }
.mt-card-wrap[data-mt-depth="8"] { padding-left: 196px; }

/* Hairline connector lines for nested cards */
.mt-card-wrap[data-mt-depth]:not([data-mt-depth="1"])::before {
    content: "";
    position: absolute;
    left: calc((var(--mt-depth-px, 28px)) - 14px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--mt-rule);
}

.mt-card-wrap[data-mt-depth="2"] { --mt-depth-px: 28px; }
.mt-card-wrap[data-mt-depth="3"] { --mt-depth-px: 56px; }
.mt-card-wrap[data-mt-depth="4"] { --mt-depth-px: 84px; }
.mt-card-wrap[data-mt-depth="5"] { --mt-depth-px: 112px; }
.mt-card-wrap[data-mt-depth="6"] { --mt-depth-px: 140px; }
.mt-card-wrap[data-mt-depth="7"] { --mt-depth-px: 168px; }
.mt-card-wrap[data-mt-depth="8"] { --mt-depth-px: 196px; }

.mt-card-wrap[data-mt-depth]:not([data-mt-depth="1"])::after {
    content: "";
    position: absolute;
    left: calc((var(--mt-depth-px, 28px)) - 14px);
    top: 32px;
    width: 12px;
    height: 1px;
    background: var(--mt-rule);
}

.mt-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: var(--mt-paper);
    border: 1px solid var(--mt-rule);
    border-radius: 14px;
    padding: 0.875rem 1rem;
    margin-bottom: 0.625rem;
    box-shadow: var(--mt-shadow-card);
    transition: box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease;
    position: relative;
}

.mt-card:hover {
    border-color: rgba(0, 138, 160, 0.3);
    box-shadow: var(--mt-shadow-card-hover);
    transform: translateY(-1px);
}

.mt-card--search {
    flex-wrap: wrap;
}

/* Expandable list of clients beneath an affiliate card. Uses native <details>/<summary>
   so open/close works without JS. The whole block sits inside .mt-card-wrap, indented
   slightly under the card so the visual association is clear. */
.mt-card__clients {
    margin: -0.25rem 0 0.625rem 2.5rem;
    border-left: 2px solid var(--mt-rule-soft);
    padding-left: 0.875rem;
    font-size: 0.8125rem;
}

.mt-card__clients-toggle {
    list-style: none;
    cursor: pointer;
    color: var(--mt-slate);
    padding: 0.25rem 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 150ms ease;
}

.mt-card__clients-toggle::-webkit-details-marker {
    display: none;
}

.mt-card__clients-toggle:hover {
    color: var(--mt-teal-deep);
}

.mt-card__clients-chevron {
    font-size: 0.6875rem;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mt-card__clients[open] .mt-card__clients-chevron {
    transform: rotate(90deg);
}

.mt-card__clients-list {
    list-style: none;
    margin: 0.25rem 0 0.5rem 0;
    padding: 0;
    border-top: 1px dashed var(--mt-rule-soft);
    padding-top: 0.375rem;
}

.mt-card__clients-item {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    color: var(--mt-ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mt-card__clients-name {
    font-weight: 600;
}

.mt-card__clients-email {
    color: var(--mt-slate);
}

.mt-card__clients-userid {
    color: var(--mt-slate);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.mt-card__clients-userid-label {
    color: var(--mt-slate);
    opacity: 0.75;
    margin-right: 0.125rem;
}

.mt-card__clients-login {
    margin-left: auto;
    color: var(--mt-slate);
    text-decoration: none;
    width: 1.875rem;
    height: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 150ms ease, color 150ms ease;
}

.mt-card__clients-login:hover,
.mt-card__clients-login:focus-visible {
    background: var(--mt-rule-soft);
    color: var(--mt-teal-deep);
    outline: none;
}

/* When a search "View in tree" link targets a specific client, the URL carries
   ?highlight=<id>; the JS auto-expands the parent's client list and adds this
   class to the matching <li> so the user can find it at a glance. */
.mt-card__clients-item--highlight {
    background: rgba(225, 151, 23, 0.18);
    box-shadow: inset 0 0 0 1px var(--mt-ochre);
}

/* In list view the affiliate cards are flattened, so the client list's vertical-rule
   indent doesn't make sense. */
.mt-page[data-mt-active-view="list"] .mt-card__clients {
    margin-left: 0;
}

/* Org Chart view is a high-level visual hierarchy. Hiding the per-card client list there
   keeps every tile the same height so the chart reads cleanly; users can switch to Tree
   or List view to see client details. The Expand all / Collapse all buttons are also
   hidden because there's nothing to expand or collapse in this flat, disclosure-less view. */
.mt-page[data-mt-active-view="orgchart"] .mt-card__clients {
    display: none;
}

.mt-page[data-mt-active-view="orgchart"] #mt-btn-expand-all,
.mt-page[data-mt-active-view="orgchart"] #mt-btn-collapse-all {
    display: none;
}

.mt-card__chevron {
    border: 0;
    background: transparent;
    color: var(--mt-slate);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.mt-card__chevron:hover {
    background: var(--mt-rule-soft);
    color: var(--mt-ink);
}

.mt-card__chevron-icon {
    display: inline-block;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mt-card[aria-expanded="true"] .mt-card__chevron-icon,
.mt-card__chevron[aria-expanded="true"] .mt-card__chevron-icon {
    transform: rotate(90deg);
}

.mt-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--mt-rule);
    flex-shrink: 0;
}

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

.mt-card__name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mt-ink);
    line-height: 1.2;
}

.mt-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--mt-slate);
    flex-wrap: wrap;
}

.mt-card__email {
    color: var(--mt-slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}

.mt-card__userid {
    color: var(--mt-slate);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.mt-card__userid-label {
    color: var(--mt-slate);
    opacity: 0.75;
    margin-right: 0.125rem;
}

.mt-card__stats {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--mt-slate);
    font-variant-numeric: tabular-nums;
}

.mt-card__path {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--mt-slate);
}

.mt-card__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Role badges - tracked-out small caps */
.mt-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
}

.mt-role-badge--manager {
    background: var(--mt-teal);
    color: #FFFFFF;
}

.mt-role-badge--professional {
    /* Use ink-on-ochre for AA contrast (white-on-ochre fails on small text). */
    background: var(--mt-ochre);
    color: var(--mt-ink);
}

.mt-role-badge--client {
    background: transparent;
    color: var(--mt-slate);
    border: 1px solid var(--mt-slate);
}

/* Icon button (Login, View clients, focus, kebab) */
.mt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mt-slate);
    border-radius: 8px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    text-decoration: none;
}

.mt-icon-btn:hover {
    background: var(--mt-rule-soft);
    color: var(--mt-teal);
    border-color: var(--mt-rule);
}

/* Action menu (kebab dropdown) */
.mt-action-menu {
    position: relative;
}

/* Lift the card-wrap above its siblings while its kebab menu is open so the dropdown
   paints over later cards instead of being clipped behind them. */
.mt-card-wrap:has(.mt-action-menu--open) {
    z-index: 50;
}

.mt-action-menu__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 220px;
    background: var(--mt-paper);
    border: 1px solid var(--mt-rule);
    border-radius: 10px;
    box-shadow: var(--mt-shadow-card-hover);
    display: none;
    z-index: 30;
}

.mt-action-menu.mt-action-menu--open .mt-action-menu__list {
    display: block;
}

.mt-action-menu__item {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--mt-ink);
    font-size: 0.875rem;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}

.mt-action-menu__item:hover {
    background: var(--mt-rule-soft);
    color: var(--mt-ink);
    text-decoration: none;
}

.mt-action-menu__item--danger {
    color: #B7382F;
}

.mt-action-menu__item--danger:hover {
    background: rgba(183, 56, 47, 0.08);
    color: #B7382F;
}

/* List view: flat, dense single-column directory style. Every card is visible regardless of expand state. */
.mt-page[data-mt-active-view="list"] .mt-card-wrap {
    padding-left: 0 !important;
}

.mt-page[data-mt-active-view="list"] .mt-card-wrap::before,
.mt-page[data-mt-active-view="list"] .mt-card-wrap::after {
    display: none;
}

.mt-page[data-mt-active-view="list"] .mt-card {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.375rem;
    border-radius: 8px;
}

.mt-page[data-mt-active-view="list"] .mt-card__avatar {
    width: 32px;
    height: 32px;
}

.mt-page[data-mt-active-view="list"] .mt-card__chevron {
    display: none;
}

.mt-page[data-mt-active-view="list"] .mt-card__stats {
    font-size: 0.8125rem;
}

/* Org Chart view: horizontal tile grid. Cards become equal-width tiles with stacked content. */
.mt-page[data-mt-active-view="orgchart"] .mt-split__left {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-content: flex-start;
    align-items: stretch;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card-wrap {
    flex: 0 1 260px;
    min-width: 220px;
    padding-left: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card-wrap::before,
.mt-page[data-mt-active-view="orgchart"] .mt-card-wrap::after {
    display: none;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card {
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.875rem;
    margin-bottom: 0;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card__chevron {
    display: none;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card__avatar {
    width: 56px;
    height: 56px;
    margin-bottom: 0.5rem;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card__body {
    width: 100%;
    text-align: center;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card__meta {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card__actions {
    margin-top: 0.5rem;
    margin-left: 0;
}

/* Picker (used by Move and Delegate modals) */
.mt-picker {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--mt-rule);
    border-radius: 10px;
    padding: 0.5rem;
}

.mt-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mt-picker__item {
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
}

.mt-picker__item:hover {
    background: var(--mt-rule-soft);
}

.mt-picker__label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--mt-ink);
    margin: 0;
}

.mt-picker__role {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mt-slate);
}

/* Search-form layout */
.mt-search__form {
    background: var(--mt-paper);
    border: 1px solid var(--mt-rule);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* asp:RadioButtonList with RepeatLayout="UnorderedList" RepeatDirection="Horizontal" renders
   <ul><li><input><label></li>...</ul>; this strips the list bullets and lays out each
   <li> as an inline-flex pair with proper spacing between groups so each radio is
   unambiguously associated with its label. */
.mt-search__form .mt-search__radios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
}

.mt-search__form .mt-search__radios li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
}

.mt-search__form .mt-search__radios input[type="radio"] {
    margin: 0;
}

.mt-search__form .mt-search__radios label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mt-ink);
}

/* MDB datepicker toggle button looks tight against the form-outline border by default; give
   it a touch more clickable area inside our form. */
.mt-search__form .datepicker-toggle-button {
    background: transparent;
    border: 0;
    padding: 0.25rem 0.5rem;
    color: var(--mt-slate);
    cursor: pointer;
}

.mt-search__form .datepicker-toggle-button:hover,
.mt-search__form .datepicker-toggle-button:focus-visible {
    color: var(--mt-teal-deep);
    outline: none;
}

.mt-search__results {
    margin-top: 1rem;
}

.mt-search__path {
    font-size: 0.8125rem;
    color: var(--mt-slate);
    line-height: 1.4;
    margin-top: 0.5rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mt-card,
    .mt-tab,
    .mt-card__chevron-icon,
    .mt-icon-btn {
        transition: none;
    }
    .mt-card:hover {
        transform: none;
    }
}

/* Font Awesome icon styled to fill the circular .feature_img tile (used by MyTeam in the Affiliate Services panel) */
.feature_img .feature_img__icon {
    font-size: 64px;
    color: #008AA0;
    line-height: 120px;
    vertical-align: middle;
}

/* ---- Team Sales rollup, per-card sales, and report launcher --------------
   The Team Sales section reuses .mt-rollup (card) and .mt-rollup__groups (the
   3-column grid). Sales groups carry a slate accent rule so they read as a
   distinct category from the teal Team group and the ochre Client groups. */
.mt-sales__caption {
    font-size: 0.8125rem;
    color: var(--mt-slate);
    margin: 0 0 1rem 0;
    max-width: 70ch;
}

.mt-rollup__group--sales {
    border-left-color: var(--mt-slate);
}

.mt-sales__money {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.mt-sales__money-line {
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.mt-sales__amt {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mt-ink);
}

.mt-sales__cur {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mt-slate);
    margin-left: 0.125rem;
}

.mt-sales__unpaid {
    display: inline-block;
    margin-left: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mt-ochre-deep);
}

.mt-sales__none {
    font-size: 0.8125rem;
    color: var(--mt-slate);
    font-style: italic;
}

/* Per-card "N sales" pill appended to the card stats line. */
.mt-card__sales-stat {
    color: var(--mt-slate);
    white-space: nowrap;
}

/* Per-card reference-code customers disclosure - mirrors .mt-card__clients with
   a slate rule so it reads as a sales (not hierarchy) list. */
.mt-card__sales-cust {
    margin: -0.25rem 0 0.625rem 2.5rem;
    border-left: 2px solid var(--mt-slate);
    padding-left: 0.875rem;
    font-size: 0.8125rem;
}

.mt-card__sales-toggle {
    list-style: none;
    cursor: pointer;
    color: var(--mt-slate);
    padding: 0.25rem 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 150ms ease;
}

.mt-card__sales-toggle::-webkit-details-marker {
    display: none;
}

.mt-card__sales-toggle:hover {
    color: var(--mt-teal-deep);
}

.mt-card__sales-chevron {
    font-size: 0.6875rem;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mt-card__sales-cust[open] .mt-card__sales-chevron {
    transform: rotate(90deg);
}

.mt-card__sales-list {
    list-style: none;
    margin: 0.25rem 0 0.5rem 0;
    padding: 0;
    border-top: 1px dashed var(--mt-rule-soft);
    padding-top: 0.375rem;
}

.mt-card__sales-item {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    color: var(--mt-ink);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mt-card__sales-name {
    font-weight: 600;
}

.mt-card__sales-email,
.mt-card__sales-date {
    color: var(--mt-slate);
}

.mt-card__sales-amt {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mt-teal-deep);
}

.mt-page[data-mt-active-view="list"] .mt-card__sales-cust {
    margin-left: 0;
}

.mt-page[data-mt-active-view="orgchart"] .mt-card__sales-cust {
    display: none;
}

/* Team Sales Report launcher (date range + View / Download buttons). */
.mt-report {
    background: var(--mt-paper);
    border: 1px solid var(--mt-rule);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--mt-shadow-card);
}

.mt-report__scope {
    font-size: 0.8125rem;
    color: var(--mt-slate);
    margin: 0 0 0.75rem 0;
    max-width: 70ch;
}

.mt-report__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.mt-report__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ==========================================================================
   Document Acknowledgment Modal
   Used on download/email pages for MyWill, MyPowerOfAttorney, MyLivingWill,
   and MyFuneral. Implemented as a Bootstrap/MDB modal styled with the
   LegalWills brand palette only (#006E7B, #008AA0, #4D5149, #D9CFCB,
   #E19717, #3A5469, #3C3C3B, #FFFFFF).
   ========================================================================== */
.ack-doc-modal .modal-dialog {
    max-width: 580px;
}

.ack-doc__content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(60, 60, 59, 0.22), 0 6px 18px rgba(60, 60, 59, 0.10);
    position: relative;
}

.ack-doc__ribbon {
    height: 6px;
    background: linear-gradient(90deg, #006E7B 0%, #008AA0 55%, #E19717 100%);
}

.ack-doc__header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 30px 32px 20px;
    border-bottom: 1px solid #D9CFCB;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(217, 207, 203, 0.20) 100%);
    position: relative;
}

.ack-doc__seal {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #006E7B;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(0, 110, 123, 0.30);
    position: relative;
}

.ack-doc__seal::before,
.ack-doc__seal::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ack-doc__seal::before {
    inset: -6px;
    border: 1px solid rgba(0, 110, 123, 0.30);
}

.ack-doc__seal::after {
    inset: -12px;
    border: 1px solid rgba(0, 110, 123, 0.10);
}

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

.ack-doc__eyebrow {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4D5149;
    font-weight: 600;
}

.ack-doc__title {
    margin: 4px 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #3C3C3B;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.ack-doc__close {
    margin: 4px 0 0 auto;
    align-self: flex-start;
    flex-shrink: 0;
}

.ack-doc__body {
    padding: 28px 32px 8px;
}

.ack-doc__statement {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: #3C3C3B;
    text-align: left;
    position: relative;
    padding: 0 4px;
}

.ack-doc__divider {
    margin: 24px 0 18px;
    text-align: center;
    color: #E19717;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ack-doc__divider::before,
.ack-doc__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #D9CFCB;
}

.ack-doc__divider-mark {
    color: #E19717;
    font-size: 14px;
    line-height: 1;
}

.ack-doc__check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 0;
    border: 1px solid #D9CFCB;
    border-radius: 10px;
    background: rgba(217, 207, 203, 0.16);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.ack-doc__check:hover {
    border-color: #008AA0;
    background: #FFFFFF;
}

.ack-doc__check:focus-within {
    border-color: #006E7B;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 110, 123, 0.18);
}

/* Visually-hidden but still focusable so keyboard users can Tab to the
   acknowledgment checkbox and toggle it with Space. The visual checkbox
   is the .ack-doc__check-box sibling that mirrors :checked / :focus-visible
   states from this input. */
.ack-doc__check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.ack-doc__check-box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid #4D5149;
    border-radius: 5px;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ack-doc__check-input:checked + .ack-doc__check-box {
    background: #006E7B;
    border-color: #006E7B;
    color: #FFFFFF;
    transform: scale(1.04);
}

.ack-doc__check-input:focus-visible + .ack-doc__check-box {
    box-shadow: 0 0 0 3px rgba(0, 110, 123, 0.35);
    border-color: #006E7B;
}

.ack-doc__check-label {
    color: #3C3C3B;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ack-doc__footer {
    padding: 18px 32px 24px;
    border-top: 1px solid #D9CFCB;
    background: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.ack-doc__cancel {
    background: transparent;
    border: 1px solid #4D5149;
    color: #4D5149;
    font-weight: 600;
    padding: 8px 18px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ack-doc__cancel:hover,
.ack-doc__cancel:focus {
    background: #4D5149;
    border-color: #4D5149;
    color: #FFFFFF;
}

.ack-doc__cancel:focus-visible {
    outline: 2px solid #006E7B;
    outline-offset: 2px;
}

.ack-doc__close:focus-visible {
    outline: 2px solid #006E7B;
    outline-offset: 2px;
    border-radius: 4px;
}

.ack-doc__continue {
    background: #006E7B;
    border: 1px solid #006E7B;
    color: #FFFFFF;
    font-weight: 600;
    padding: 9px 22px;
    box-shadow: 0 6px 14px rgba(0, 110, 123, 0.22);
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    display: inline-flex;
    align-items: center;
}

.ack-doc__continue:hover:not(:disabled),
.ack-doc__continue:focus:not(:disabled) {
    background: #008AA0;
    border-color: #008AA0;
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(0, 138, 160, 0.28);
    transform: translateY(-1px);
}

.ack-doc__continue:focus-visible:not(:disabled) {
    outline: 2px solid #FFFFFF;
    outline-offset: -4px;
    box-shadow: 0 0 0 3px rgba(0, 110, 123, 0.45), 0 8px 18px rgba(0, 138, 160, 0.28);
}

.ack-doc__continue:disabled,
.ack-doc__continue[disabled] {
    background: #D9CFCB;
    border-color: #D9CFCB;
    color: #FFFFFF;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 1;
    transform: none;
}

.ack-doc__continue-icon {
    transition: transform 0.18s ease;
}

.ack-doc__continue:hover:not(:disabled) .ack-doc__continue-icon {
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    .ack-doc__header,
    .ack-doc__body,
    .ack-doc__footer {
        padding-left: 22px;
        padding-right: 22px;
    }
    .ack-doc__seal {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }
    .ack-doc__title {
        font-size: 1.3rem;
    }
    .ack-doc__statement {
        font-size: 0.95rem;
    }
    .ack-doc__footer {
        flex-direction: column-reverse;
    }
    .ack-doc__footer .ack-doc__cancel,
    .ack-doc__footer .ack-doc__continue {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ack-doc__check,
    .ack-doc__check-box,
    .ack-doc__continue,
    .ack-doc__continue-icon,
    .ack-doc__cancel {
        transition: none;
    }
    .ack-doc__continue:hover:not(:disabled) {
        transform: none;
    }
    .ack-doc__continue:hover:not(:disabled) .ack-doc__continue-icon {
        transform: none;
    }
    .ack-doc__check-input:checked + .ack-doc__check-box {
        transform: none;
    }
}

/* ============================================================================== */
/* Wizard toggle cards (single-select Yes/No used by _distribution_contingency)   */
/* ============================================================================== */
.pw-wiz-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pw-wiz-toggle-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all .2s ease;
    color: #3C3C3B;
    font-size: 1rem;
    text-decoration: none;
}
.pw-wiz-toggle-card small {
    font-size: .9rem;
}
.pw-wiz-toggle-link {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 18px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    color: #3C3C3B;
    text-decoration: none;
    cursor: pointer;
    /* Override the global `a { transition: 0.5s }` rule so the focus/active
       state changes don't progressively animate line-height, padding, etc. */
    transition: none;
    line-height: 2;
}
.pw-wiz-toggle-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}
.pw-wiz-toggle-link > * {
    position: relative;
    z-index: 2;
}
.pw-wiz-toggle-link:hover,
.pw-wiz-toggle-link:focus,
.pw-wiz-toggle-link:active {
    color: #3C3C3B;
    text-decoration: none;
    outline: none;
}
/* Override the global Redesign.min.css `a:focus` and `a:active` rules so the
   focus/hold state doesn't change the link's geometry, font, or line-height
   (which otherwise turns the link into an inline-flex, fit-content, brown-
   bordered chip and animates a line-height growth on mousedown). Values must
   match the base `.pw-wiz-toggle-link` exactly. */
.pw-wiz-toggle-link:focus,
.pw-wiz-toggle-link:active {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-weight: inherit;
    font-style: normal;
    letter-spacing: normal;
    line-height: 2;
}
@media (hover: hover) {
    .pw-wiz-toggle-card:hover {
        border-color: #008AA0;
    }
}
.pw-wiz-toggle-card:focus {
    outline: 2px solid #008AA0;
    outline-offset: -2px;
}
/* Selected state is derived from which content panel rendered (pnlSkipBlock vs pnlConfigureBlock).
   Server only flips Visible; CSS picks up the marker class via :has(). */
.pw-wiz-toggle-list:has(~ .pw-skip-active) .pw-toggle-no,
.pw-wiz-toggle-list:has(~ .pw-configure-active) .pw-toggle-yes {
    border-color: #008AA0;
    background: rgba(0,138,160,.04);
}
.pw-wiz-toggle-icon {
    width: 22px;
    height: 22px;
    border: 2px solid #bbb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .7rem;
    color: transparent;
    transition: all .2s ease;
}
.pw-wiz-toggle-list:has(~ .pw-skip-active) .pw-toggle-no .pw-wiz-toggle-icon,
.pw-wiz-toggle-list:has(~ .pw-configure-active) .pw-toggle-yes .pw-wiz-toggle-icon {
    background: #008AA0;
    border-color: #008AA0;
    color: #fff;
}

/* ============================================================================
   Will Power / Volonte de faire partnership banner  (controls/WillPowerBanner.ascx)
   Charitable Donations wizard pages, LegalWills.ca / volontesdevie.ca only.
   Refined, low-profile co-branding strip in Will Power's brand:
   indigo #412D87 + gold #FDBC35 on white. WCAG 2.2 AA contrasts verified.
   ============================================================================ */
.willpower-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1.75rem;
    padding: 0.85rem 1.15rem;
    background: #fff;
    border: 1px solid #D9CFCB;
    border-top: 3px solid #FDBC35;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(65, 45, 135, 0.06);
}

/* Brand block: small "in partnership with" label above the partner logo */
.willpower-banner__brand {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 0 0 auto;
}
.willpower-banner__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #4D5149;
    line-height: 1;
}
.willpower-banner__logo {
    display: block;
    height: 30px;
    width: auto;
}

/* Copy: bold indigo tagline followed by a calm supporting sentence */
.willpower-banner__copy {
    flex: 1 1 240px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #4D5149;
}
.willpower-banner__tagline {
    font-weight: 700;
    color: #412D87;
}

/* Learn More: Will Power's signature gold pill with indigo text (no transforms) */
.willpower-banner__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.78rem;
    border: 1px solid transparent;
    border-radius: 50rem;
    background: #FDBC35;
    color: #412D87;
    font-weight: 600;
    font-size: 0.76rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.willpower-banner__btn:hover,
.willpower-banner__btn:focus {
    background: #F0AD1F;
    color: #412D87;
    box-shadow: 0 2px 8px rgba(65, 45, 135, 0.18);
}
.willpower-banner__btn:focus-visible {
    outline: 3px solid #412D87;
    outline-offset: 2px;
}
.willpower-banner__btn-arrow {
    font-weight: 700;
}

/* Desktop: subtle divider between the brand block and the copy */
@media (min-width: 768px) {
    .willpower-banner__copy {
        padding-left: 1.25rem;
        border-left: 1px solid #D9CFCB;
    }
}

/* Small screens: stack brand / copy / button, left-aligned */
@media (max-width: 575.98px) {
    .willpower-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .willpower-banner__copy {
        flex-basis: auto;
    }
}

/* ---- Learn More modal accents ---- */
.willpower-modal .modal-title {
    color: #412D87;
    font-weight: 700;
}
.willpower-modal__intro {
    font-size: 1.02rem;
    color: #3C3C3B;
}
.willpower-modal-section {
    margin-top: 1.1rem;
}
.willpower-modal-section h6 {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding-bottom: 0.15rem;
    border-bottom: 2px solid #FDBC35;
    color: #412D87;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.8rem;
}
.willpower-modal__steps {
    margin: 0;
    padding-left: 1.2rem;
}
.willpower-modal__steps li {
    margin-bottom: 0.5rem;
}
.willpower-modal__steps li::marker {
    color: #412D87;
    font-weight: 700;
}
.willpower-modal .modal-footer {
    justify-content: space-between;
}
.willpower-modal__link {
    color: #412D87;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.willpower-modal__link:hover,
.willpower-modal__link:focus {
    color: #412D87;
    text-decoration: underline;
}
.willpower-modal__close {
    background: #412D87;
    color: #fff;
}
.willpower-modal__close:hover,
.willpower-modal__close:focus {
    background: #34216E;
    color: #fff;
}

/* ============================================================
   Icon tile strips across the will wizards
   (mywill / myexpatwill distribution donations, property and residue pages,
    EN + FR). Each strip is a centered row of fixed-width tiles. All tiles
   sit on one line when the strip's column is wide enough; when it is too
   narrow they wrap into balanced, centered rows (no orphaned 1-2 icons),
   the split decided by the .icon-tiles-N count modifier. Width is judged
   from the strip's own container via a container query, so it behaves the
   same whether or not the Common Questions help sidebar is open. Labels
   never break mid-word, and icon size is normalised across the differing
   page markups. Browsers without :has()/@container support degrade to a
   plain centered wrap.
   ============================================================ */
:has(> .icon-tiles) {
    container-type: inline-size;
}
.icon-tiles.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem 0.65rem;
    margin-left: 0;
    margin-right: 0;
}
.icon-tiles.row > * {
    flex: 0 0 auto;
    width: 5.25rem;
    max-width: 5.25rem;
    min-width: 0;
    padding: 0;
}
.icon-tiles.row > * i {
    font-size: 1.6rem !important;
    margin-bottom: 0.4rem !important;
}
.icon-tiles .p-2 {
    padding: 0.25rem !important;
}
/* Tighten line spacing for every tile label, including the smaller
   parenthetical notes (e.g. "(in some cases)") that wrap to two lines. */
.icon-tiles.row > * div {
    line-height: 1.2;
}
.icon-tiles .small {
    font-size: 0.78rem;
}
/* Balanced wrap caps by icon count, applied only once a single line no
   longer fits (each threshold is the width that exact row of tiles needs). */
@container (max-width: 23rem) {
    .icon-tiles-4.row { max-width: 12rem; margin-left: auto; margin-right: auto; }   /* 4 -> 2 + 2 */
}
@container (max-width: 29rem) {
    .icon-tiles-5.row { max-width: 18rem; margin-left: auto; margin-right: auto; }   /* 5 -> 3 + 2 */
}
@container (max-width: 35rem) {
    .icon-tiles-6.row { max-width: 18rem; margin-left: auto; margin-right: auto; }   /* 6 -> 3 + 3 */
}
@container (max-width: 41rem) {
    .icon-tiles-7.row { max-width: 24rem; margin-left: auto; margin-right: auto; }   /* 7 -> 4 + 3 */
}

/* ============================================================
   Wizard layout: keep the form content beside the "Common Questions"
   help sidebar (#TellMeMore) instead of dropping below it at laptop
   widths. The content area is a plain Bootstrap .col, which defaults to
   min-width:auto and therefore refuses to shrink below its intrinsic
   content width; combined with the wide .right_form_section padding,
   that forces the column to wrap under the sidebar (exposing the grey
   .wizard-form-body background) once the viewport falls below ~1285px.
   Allowing the column to shrink keeps the two columns side by side.
   Affects every page built on WizardResp.master.
   ============================================================ */
#TellMeMore + .col {
    min-width: 0;
}



/* ============================================================================
   Affiliate earnings & payout pages (MyEarnings, MyPayoutSettings)
   Brand palette only: #008AA0 #006E7B #4D5149 #D9CFCB #E19717 #3A5469 #3C3C3B
   ============================================================================ */
.pw-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(0,138,160,.10),rgba(0,138,160,.025));border:1px solid #D9CFCB;border-radius:1rem;padding:1.65rem 1.85rem;margin-bottom:1.5rem;}
.pw-hero__eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:#4D5149;margin-bottom:.45rem;}
.pw-amt{font-size:2.7rem;line-height:1;font-weight:700;color:#006E7B;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.pw-amt .ccy{font-size:1.05rem;font-weight:600;color:#4D5149;margin-left:.4rem;}
.pw-ready{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;padding:.3rem .7rem;border-radius:1rem;background:rgba(0,110,123,.12);color:#006E7B;font-weight:600;font-size:.85rem;}
.pw-progress{margin-top:.95rem;max-width:380px;}
.pw-progress__track{height:.5rem;border-radius:1rem;background:#D9CFCB;overflow:hidden;}
.pw-progress__fill{height:100%;border-radius:1rem;background:linear-gradient(90deg,#E19717,#caa015);}
.pw-progress__cap{font-size:.82rem;color:#4D5149;margin-top:.4rem;}
.pw-progress__cap b{color:#3C3C3B;}
.pw-hero__foot{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin-top:1.1rem;padding-top:.85rem;border-top:1px solid #D9CFCB;font-size:.875rem;color:#4D5149;}
.pw-hero__foot b{color:#3C3C3B;font-weight:600;font-variant-numeric:tabular-nums;}
@media(max-width:575px){.pw-amt{font-size:2.1rem;}}

.card.pw-card{border:1px solid #D9CFCB;border-radius:.85rem;box-shadow:0 1px 3px rgba(60,60,59,.05);}
.pw-card__title{display:flex;align-items:center;gap:.55rem;font-size:1.02rem;font-weight:600;color:#3C3C3B;margin:0 0 1.1rem;}
.pw-card__title i{color:#008AA0;}

.pw-summary{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.4rem 1.25rem;margin:.25rem 0 1.1rem;}
.pw-summary__item .lbl{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#4D5149;margin-bottom:.15rem;}
.pw-summary__item .val{font-size:1.2rem;font-weight:600;color:#3C3C3B;font-variant-numeric:tabular-nums;}
.pw-summary__op{align-self:center;color:#c9bdb8;font-weight:700;font-size:1.1rem;padding-bottom:.1rem;}
.pw-summary__item--net .val{color:#006E7B;}
.pw-fineprint{font-size:.85rem;color:#4D5149;margin-bottom:1rem;}

.pw-note{display:flex;gap:.5rem;align-items:flex-start;color:#4D5149;font-size:.875rem;}
.pw-note i{color:#008AA0;margin-top:.15rem;}

.pw-pill{display:inline-block;padding:.22rem .6rem;border-radius:1rem;font-size:.76rem;font-weight:600;line-height:1;}
.pw-pill--paid{background:rgba(0,110,123,.12);color:#006E7B;}
.pw-pill--progress{background:rgba(58,84,105,.12);color:#3A5469;}
.pw-pill--muted{background:rgba(77,81,73,.10);color:#4D5149;}
.pw-pill--await{background:#9A6200;color:#fff;}
.pw-table{font-variant-numeric:tabular-nums;}
.pw-table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#4D5149;border-bottom:2px solid #D9CFCB;font-weight:600;}

.btn-pw{background:#006E7B;color:#fff;font-weight:600;}
.btn-pw:hover,.btn-pw:focus{background:#006E7B;color:#fff;}
.btn-gold{background:#9A6200;color:#fff;font-weight:600;}
.btn-gold:hover,.btn-gold:focus{background:#7d4f00;color:#fff;}
/* Destructive admin action: self-contained (no framework colour variables), outline until hover */
.btn-pw-danger{background:#fff;color:#B02A37;border:2px solid #B02A37;font-weight:600;}
.btn-pw-danger:hover,.btn-pw-danger:focus{background:#B02A37;color:#fff;border-color:#B02A37;}

/* Admin payouts dashboard ------------------------------------------------- */
.pw-subtitle{color:#4D5149;font-size:.95rem;}
.pw-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem;}
.pw-stat{background:#fff;border:1px solid #D9CFCB;border-radius:.85rem;padding:1.1rem 1.25rem;box-shadow:0 1px 3px rgba(60,60,59,.05);}
.pw-stat--accent{border-left:4px solid #E19717;}
.pw-stat__label{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:700;color:#4D5149;margin-bottom:.4rem;}
.pw-stat__value{font-size:1.9rem;line-height:1;font-weight:700;color:#006E7B;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.pw-stat__value .unit{font-size:1rem;font-weight:600;color:#4D5149;margin-left:.25rem;}
.pw-stat__sub{font-size:.8rem;color:#4D5149;margin-top:.45rem;}
.pw-fxbar{display:flex;flex-direction:column;gap:.2rem;font-size:.92rem;color:#3C3C3B;font-variant-numeric:tabular-nums;}
.pw-fxbar b{color:#006E7B;font-weight:600;}
.pw-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem;}
.pw-toolbar__note{font-size:.82rem;color:#4D5149;margin:0;max-width:52ch;}
.pw-toolbar__note--full{max-width:none;}
.pw-toolbar .form-check{margin:0;}
.pw-table{width:100%;}
.pw-table thead th{white-space:nowrap;padding:.55rem .65rem;}
.pw-table tbody td{padding:.45rem .6rem;border-top:1px solid rgba(217,207,203,.6);vertical-align:middle;}
.pw-table tbody tr:hover{background:rgba(0,138,160,.045);}
.pw-table a:not(.pw-link-btn){color:#006E7B;font-weight:600;}
.pw-table .text-id{color:#4D5149;font-variant-numeric:tabular-nums;}
.pw-num--total{font-weight:700;color:#3C3C3B;}
.pw-table tbody tr.pw-row--hidden > td{background-color:rgba(217,207,203,.5) !important;}
.pw-table tbody tr.pw-row--hidden:hover > td{background-color:rgba(217,207,203,.65) !important;}
.pw-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;}
.pw-actions__links{display:flex;flex-wrap:wrap;gap:.05rem .6rem;}
.pw-alink{color:#006E7B;font-weight:600;font-size:.78rem;text-decoration:underline;white-space:nowrap;}
.pw-alink:hover,.pw-alink:focus{color:#3C3C3B;}
.pw-alink-btn{background:none;border:0;padding:0;font-family:inherit;color:#4D5149;font-weight:600;font-size:.78rem;text-decoration:underline;cursor:pointer;white-space:nowrap;}
.pw-alink-btn:hover,.pw-alink-btn:focus{color:#006E7B;}
.pw-link-btn{display:inline-block;padding:.25rem .6rem;border:1px solid #D9CFCB;border-radius:.5rem;font-size:.8rem;font-weight:600;color:#006E7B;text-decoration:none;white-space:nowrap;}
.pw-link-btn:hover,.pw-link-btn:focus,a.pw-link-btn:hover,a.pw-link-btn:focus{background:#006E7B;color:#fff;border-color:#006E7B;text-decoration:none;}
.pw-link-btn--primary,a.pw-link-btn--primary,.pw-table a.pw-link-btn--primary{background:#006E7B;color:#fff;border-color:#006E7B;}
.pw-link-btn--primary:hover,.pw-link-btn--primary:focus,a.pw-link-btn--primary:hover,a.pw-link-btn--primary:focus{background:#006E7B;border-color:#006E7B;color:#fff;}
.pw-table .btn-sm{border-radius:.5rem;font-size:.8rem;}


/* Language switcher z-index fix (member pages): Redesign.css sets .pw-language{z-index:1045}
   so the OPEN menu clears the side nav (1035), but that also floats the CLOSED flag/toggle
   above the nav, which bleeds through on short pages where the fixed side nav overlaps the
   footer. Keep the closed widget in normal flow; raise it only while it is open/focused. */
.pw-language{z-index:auto;}
.pw-language:focus-within{z-index:1045;}
.pw-language .dropdown-menu{z-index:1045;}

/* Direct Debit "where to find these on a cheque" helper (MyPayoutSettings). Light member UI only. */
.pw-chequehelp{border:1px solid #e3ded9;border-radius:10px;padding:14px 16px;background:#fbfaf8;}
.pw-chequehelp__title{font-weight:600;font-size:.95rem;margin:0 0 10px;}
.pw-chequehelp svg{width:100%;max-width:560px;height:auto;display:block;}
.pw-chequehelp__legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;}
.pw-chequehelp__legend li{display:flex;align-items:center;font-size:.9rem;}
.pw-chequehelp__badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#006E7B;color:#fff;font-size:12px;font-weight:700;margin-right:7px;flex:none;}

/* ===== Partner Admin (Contract Partners list + console) ===== */
.pw-card__subtitle{font-size:1rem;font-weight:700;color:#3C3C3B;margin:0 0 10px;}
.btn-outline-pw{border:1px solid #006E7B;color:#006E7B;background:#fff;}
.btn-outline-pw:hover,.btn-outline-pw:focus{background:#006E7B;color:#fff;border-color:#006E7B;}
.pw-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap;}
.pw-chip--ok{background:#006E7B;color:#fff;}
.pw-chip--warn{background:#E19717;color:#000;}
/* The .pw-card admin pages (Partner Payments, the partner console, Partner Invoicing): MDB's outline danger red
   (#dc4c64) is 3.99:1 on white, so their Cancel / Retire / Remove buttons take the admin area's action red
   (#B02A37, as .bk-count--action and .si-admin use), and the outstanding-commission caption takes brand grey. */
.pw-card .btn-outline-danger{color:#B02A37;border-color:#B02A37;}
.pw-card .btn-outline-danger:hover,.pw-card .btn-outline-danger:focus{color:#FFFFFF;background-color:#B02A37;border-color:#B02A37;}
.pw-card .pw-table a.btn-outline-danger{color:#B02A37;}   /* a LinkButton in a grid: outranks .pw-table a:not(.pw-link-btn) teal */
.pw-card .pw-table a.btn-outline-danger:hover,.pw-card .pw-table a.btn-outline-danger:focus{color:#FFFFFF;}   /* ...and so needs its own white on the red hover fill */
.pw-table > caption{color:#4D5149;}
.pw-partnerlist__row{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:flex-start;padding:16px 0;border-bottom:1px solid #D9CFCB;}
.pw-partnerlist__row:last-child{border-bottom:none;padding-bottom:0;}
.pw-partnerlist__main{flex:1 1 380px;min-width:0;}
.pw-partnerlist__name{font-size:1.05rem;font-weight:700;}
.pw-partnerlist__name a{color:#006E7B;}
.pw-partnerlist__meta{font-size:.85rem;color:#4D5149;font-weight:400;margin-left:0;}
.pw-partnerlist__name .pw-partnerlist__meta{margin-left:10px;}
.pw-partnerlist__deal{margin:4px 0;color:#3C3C3B;}
.pw-partnerlist__side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto;}
.pw-partnerlist__outstanding{font-weight:700;color:#3C3C3B;}
.pw-contract-card{border-left:5px solid #006E7B;}
.pw-contract-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:8px;}
.pw-contract-card__logo{max-height:44px;max-width:170px;}
.pw-contract-card__name{font-size:1.35rem;font-weight:700;margin:0;color:#3C3C3B;}
.pw-contract-card__meta{font-size:.85rem;color:#4D5149;}
.pw-contract-card__chips{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.pw-contract-card__deal{font-size:1.02rem;color:#3C3C3B;margin:0 0 8px;}
.pw-contract-card__links{font-size:.9rem;color:#4D5149;}
.pw-contract-card__links a{color:#006E7B;}

/* Buttons rendered inside member tables: table.table a (link blue) otherwise outranks .btn-primary's white text, making the label invisible on the blue button (e.g. the bookkeeping receipts Review button). */
.table a.btn.btn-primary, .table a.btn.btn-primary:hover, .table a.btn.btn-primary:focus{color:#FFFFFF;}

/* Numbered step chip on the bookkeeping dashboard headings (brand teal #006E7B: AA on white). */
.bk-step-num{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;background-color:#006E7B;color:#FFFFFF;font-size:1rem;font-weight:600;margin-right:.6rem;flex-shrink:0;}

/* Section-count badges on the bookkeeping receipts and exceptions page: orange = items waiting, greige = clear. */
.bk-count{background-color:#E19717;color:#000000;}
.bk-count--zero{background-color:#D9CFCB;color:#3C3C3B;}

/* Highlighted "Active period" banner at the top of the bookkeeping dashboard (brand greige + teal). */
.bk-active-period{background-color:#D9CFCB;border-left:5px solid #006E7B;border-radius:.25rem;padding:1rem 1.25rem;margin:1rem 0 1.5rem;}
.bk-active-period h2{margin-top:0;}
.bk-active-period p:last-child{margin-bottom:0;}

/* Bookkeeping dashboard: the zone AFTER the numbered monthly steps. A labelled full-stop break plus one quiet framed aside make the Wise top-up tool and the runs history read as reference material, not as steps 5 and 6. Olive/greige only, so the teal step chips keep the emphasis. */
.bk-aside-break{display:flex;align-items:center;gap:1rem;margin:3rem 0 1.25rem;}
.bk-aside-break::before,.bk-aside-break::after{content:"";flex:1 1 auto;border-top:2px solid #D9CFCB;}
.bk-aside-break span{color:#4D5149;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;}
.bk-aside{border:1px solid #D9CFCB;border-radius:.5rem;padding:1.25rem 1.25rem .25rem;margin-bottom:2rem;}
.bk-aside h2{color:#4D5149;margin-top:0;}
.bk-aside hr{border-top:1px solid #D9CFCB;opacity:1;margin:1.5rem 0;}
.bk-aside-tag{display:inline-block;margin-left:.5rem;padding:.15rem .6rem;border-radius:50rem;background-color:#4D5149;color:#FFFFFF;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;}

/* Bookkeeping tables: generated file names (PAYMENT_DETAILS_ALL_...xlsx) have no break points; without this they stretch the Document column and squeeze the rest of the table off the edge. max-width on a td is undefined in auto table layout (and .table-responsive lets the table grow instead of wrapping), so the cap goes on an inline-block wrapper INSIDE the cell, which is always honoured. */
.bk-doc-name .bk-doc-file{display:inline-block;max-width:22rem;word-break:break-all;overflow-wrap:anywhere;vertical-align:top;}

/* Bookkeeping "Provided by" cell. A person's name is short and reads badly split across two lines ("Henry / Raud"), so it holds one line; an address that matched nobody on the roster can be long, so it keeps wrapping - at any break point rather than overflowing. */
.bk-provider{display:inline-block;overflow-wrap:anywhere;}
.bk-provider--person{white-space:nowrap;}

/* Bookkeeping count badges, colour-coded by urgency: red = a decision is needed now; gold (.bk-count) = waiting, no forced action; greige (--zero) = informational. Red uses MDB's danger token (matches the console's alert-danger), as the brand palette carries no red. */
.bk-count--action{background-color:#DC4C64;color:#FFFFFF;}

/* Bookkeeping section headings double as collapse toggles (sections start collapsed - the badges say where the work is). The chevron rotates with the state; rows targeted by a #line/#doc return-anchor get a soft highlight. */
.bk-sec-toggle{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;}
.bk-sec-toggle::before{content:"\25B8";display:inline-block;margin-right:.4rem;transition:transform .15s ease;}
.bk-sec-toggle[aria-expanded="true"]::before{transform:rotate(90deg);}
.bk-sec-toggle:hover,.bk-sec-toggle:focus-visible{color:#006E7B;}
tr:target td{background-color:#FBF0DC;}

/* Bookkeeping "What will post to QuickBooks" preview tables inside the review panels. */
.bk-preview{background-color:#F5F2F1;}
.bk-preview .bk-preview-label{width:11rem;white-space:nowrap;font-weight:600;}
.bk-preview .table{margin-bottom:0;background-color:transparent;}

/* ===== Statement-line page: paperwork vs. booking-option grammar. Two zones read differently on
   purpose - the supporting "Paperwork" blocks carry a muted slate rail, while the mutually-
   exclusive booking methods carry a teal rail and an auto-numbered "Option N" eyebrow so it is
   plain that only one applies. The counter runs over rendered .bk-option panels only, and ASP.NET
   emits no markup for a hidden panel, so the numbering always matches what the line actually shows. ===== */
.bk-zone{max-width:900px;}
.bk-zone + .bk-zone{margin-top:2.25rem;}
.bk-zone-head{margin-bottom:1rem;}
.bk-zone-title{margin-bottom:.15rem;color:#3C3C3B;}
.bk-zone-intro{color:#4D5149;max-width:62ch;margin-bottom:0;}
.bk-item-title{color:#4D5149;margin-bottom:.35rem;}
/* Reconcile figures: the exact QuickBooks balance/date, gold-highlighted so they are impossible to miss inside the numbered steps (black on brand gold #E19717 = AA). */
.bk-recon-figure{background-color:#E19717;color:#000000;font-weight:700;padding:.05em .4em;border-radius:.2rem;}
/* Monthly-close checklist: a native <details> collapsed when the month is done, so a finished close reads as done rather than a to-do list. The summary is a clickable header with a disclosure caret. */
.bk-checklist{margin-top:.5rem;}
.bk-checklist > summary.bk-checklist-summary{cursor:pointer;font-size:1.2rem;font-weight:600;color:#3C3C3B;padding:.6rem .75rem;list-style:none;border-radius:.35rem;}
.bk-checklist > summary.bk-checklist-summary::-webkit-details-marker{display:none;}
.bk-checklist > summary.bk-checklist-summary::before{content:"\25B6";display:inline-block;margin-right:.6rem;color:#006E7B;font-size:.8em;transition:transform .15s ease;}
.bk-checklist[open] > summary.bk-checklist-summary::before{transform:rotate(90deg);}
.bk-checklist:not([open]) > summary.bk-checklist-summary{background:#EEF2F2;border-left:4px solid #006E7B;}
.bk-checklist > summary.bk-checklist-summary:hover{background:#EEF2F2;}
.bk-checklist > summary.bk-checklist-summary:focus-visible{outline:2px solid #006E7B;outline-offset:2px;}
/* Supporting/paperwork blocks: muted slate rail, so they never read as a booking option. */
.bk-paper{border-left:4px solid #4D5149 !important;}
/* Collapsible "Attach a pending document" section (starts collapsed; native <details>/<summary>). */
.bk-attach > .bk-summary{cursor:pointer;font-weight:600;color:#4D5149;}
.bk-attach > .bk-summary:hover{color:#006E7B;}
.bk-attach > .bk-summary:focus-visible{outline:2px solid #006E7B;outline-offset:2px;}
.bk-attach[open] > .bk-summary{margin-bottom:.25rem;}
/* Booking options: teal rail + auto-numbered "Option N" eyebrow above each option's title. */
.bk-booking{counter-reset:bkopt;}
.bk-option{border-left:4px solid #006E7B !important;counter-increment:bkopt;}
.bk-opt-title{margin-bottom:.5rem;color:#3C3C3B;}
.bk-opt-title::before{content:"Option " counter(bkopt);display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#006E7B;margin-bottom:.15rem;}
/* Tax filing tracker badges: brand-palette colours that hold 4.5:1 at badge size
   (the MDB bg-danger/bg-secondary tokens fail AA on white text at 10.8px).
   Amber carries urgency with BLACK text; the dark brand tones carry states with white. */
.bk-badge{display:inline-block;padding:.25em .5em;font-size:.75em;font-weight:700;border-radius:.25rem;line-height:1;white-space:nowrap;}
.bk-badge--warn{background-color:#E19717;color:#000000;}
.bk-badge--quiet{background-color:#4D5149;color:#FFFFFF;}
.bk-badge--blue{background-color:#3A5469;color:#FFFFFF;}
.bk-badge--teal{background-color:#006E7B;color:#FFFFFF;}
.bk-badge--green{background-color:#146C43;color:#FFFFFF;}   /* "Figures ready" (Henry 2026-07-16): green, distinct from the grey Upcoming; 5.7:1 on white text */
/* Stale unmatched document (dated on/before the last processed close but still no bank/card line):
   a soft amber row so it stands out in the "no matching line yet" list. !important beats Bootstrap's
   per-cell table background; the left edge on the first cell adds a stronger accent. */
tr.bk-doc-stale > td{background-color:#FBEAC8 !important;}
tr.bk-doc-stale > td:first-child{border-left:4px solid #E19717 !important;}

/* Contrast repairs on the bookkeeping admin surfaces (Lighthouse AA):
   - bk-ok replaces MDB's .text-success (#14A44D on white = 3.0:1) for "staged" labels;
   - bk-link replaces the default MDB link blue (3.68:1) in emitted tables;
   - the action badge darkens from the MDB danger token (3.99:1) while staying red;
   - alert-info's .alert-link darkens to hold 4.5:1 on the tinted background. */
.bk-ok{color:#006E7B;font-weight:600;}
.bk-link{color:#006E7B !important;text-decoration:underline;}   /* !important: MDB's table/link rules outweigh a single class */
.bk-count--action{background-color:#B02A37 !important;}
.alert-info .alert-link{color:#055160;}

/* Signing Instructions admin (members-only, raw-served): brand-colour the code tags, plain links
   and small outline action buttons so they hold WCAG 2.2 AA contrast on white. Scoped to
   .si-admin so no other member page is affected; MDB defaults (#e91e63 code, #007bff/#dc3545
   outline buttons) fall just under 4.5:1 at these sizes. */
.si-admin code{color:#006E7B;}
.si-admin a:not(.btn){color:#006E7B;}
.si-admin .btn-outline-primary{color:#006E7B;border-color:#006E7B;}
.si-admin .btn-outline-primary:hover,.si-admin .btn-outline-primary:focus{color:#FFFFFF;background-color:#006E7B;border-color:#006E7B;}
.si-admin .btn-outline-danger{color:#B02A37;border-color:#B02A37;}
.si-admin .btn-outline-danger:hover,.si-admin .btn-outline-danger:focus{color:#FFFFFF;background-color:#B02A37;border-color:#B02A37;}

/* Signing Instructions console (members-only, raw-served): the visual "edit on the sheet" editor.
   The document sheet is the star on a soft drafting-table canvas; the chrome stays quiet. */
.si-console .si-surface-toggle{display:inline-flex;max-width:100%;margin-bottom:1rem;border:1px solid #006E7B;border-radius:8px;overflow:hidden;background:#fff;}
.si-console .si-seg{display:inline-flex;align-items:center;padding:.5rem 1.1rem;font-size:.9rem;font-weight:600;line-height:1.2;text-decoration:none;color:#006E7B;background:#fff;text-transform:none;transition:background .12s,color .12s;}
.si-console .si-seg + .si-seg{border-left:1px solid #006E7B;}
.si-console .si-seg i{margin-right:.4rem;font-size:.85em;}
.si-console .si-seg:hover:not(.active){background:#e6f1f3;color:#005560;}
.si-console .si-seg.active{background:#006E7B;color:#fff;}
.si-console .si-toolbar-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;margin-bottom:.55rem;}
.si-console .si-toolbar-title{font-weight:700;color:#3C3C3B;font-size:.95rem;}
.si-console .si-toolbar-title i{color:#006E7B;margin-right:.25rem;}
.si-console .si-toolbar-note{color:#4D5149;font-size:.8rem;}
.si-console .si-brand-head{padding-bottom:.6rem;border-bottom:1px solid #ece9e4;margin-bottom:.35rem;}
.si-console .si-brand-head h2 i{color:#006E7B;margin-right:.3rem;}
.si-console .si-perbadge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#006E7B;background:#e6f1f3;border-radius:10px;padding:.08rem .5rem;vertical-align:middle;margin-left:.35rem;}
.si-console .si-tb-label{display:block;font-size:.72rem;font-weight:600;color:#4D5149;margin-bottom:2px;}
.si-console .si-toolbar{border:1px solid #e3e0da;}
.si-console .si-canvas{background:#E9E7E2;border-radius:10px;padding:20px;overflow:auto;max-height:calc(100vh - 210px);}
.si-console .si-stage-wrap{overflow:hidden;margin:0 auto;}
.si-console .si-stage{transform-origin:top left;}
.si-console .si-doc{width:816px;height:2160px;border:none;background:#fff;box-shadow:0 6px 28px rgba(58,84,105,.20);display:block;}
.si-console .si-panel{position:sticky;top:12px;}
.si-console .si-hint{border:1px dashed #b9c6cc;background:#f7f9fa;}
.si-console .si-hint-icon{font-size:1.6rem;color:#006E7B;margin-bottom:8px;}
.si-console .si-editor{border:1px solid #cfe0e3;}
.si-console .si-editor-title{font-weight:700;color:#3A5469;font-size:1.05rem;display:block;}
.si-console .si-editor-where{font-size:.72rem;color:#006E7B;font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.si-console .si-textarea{font-family:ui-monospace,Consolas,monospace;font-size:.9rem;}
.si-console .si-scope{margin:2px 0 10px 0;}
.si-console .si-history summary{cursor:pointer;font-size:.85rem;color:#006E7B;font-weight:600;}
.si-console .si-hist-row{border-top:1px solid #eee;padding:6px 0;font-size:.8rem;}
.si-console .si-hist-meta{color:#4D5149;}
.si-console .si-set-row{margin-bottom:12px;}
.si-console .si-set-label{display:block;font-size:.78rem;font-weight:600;color:#4D5149;margin-bottom:3px;}
.si-console .si-set-img{border:1px solid #e3e0da;border-radius:4px;padding:8px;margin-bottom:4px;text-align:center;}
.si-console .si-set-img-navy{background:#3A5469;}
.si-console .si-set-img-white{background:#FFFFFF;}
.si-console .si-set-img img{max-height:52px;max-width:100%;vertical-align:middle;}

/* ============================================================
   Shipping admin console (members/shipping_admin*.aspx)
   Label-first queue: the address renders as the thermal label it
   will become; coloured tape strips replace the old Excel highlights.
   ============================================================ */
.pwship-stats{display:flex;gap:34px;flex-wrap:wrap;margin:14px 2px 18px;}
.pwship-stat-n{font-family:Consolas,'Cascadia Mono',monospace;font-size:1.5rem;font-weight:700;display:block;font-variant-numeric:tabular-nums;}
.pwship-stat-l{font-size:.72rem;color:#4D5149;text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:-4px;}
.pwship-warntext{color:#7A5200;}
.pwship-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px;}
.pwship-filterlabel{font-size:.72rem;color:#4D5149;text-transform:uppercase;letter-spacing:.08em;}
.pwship-filtersep{width:1px;height:18px;background:#DCD6D0;margin:0 6px;}
a.pwship-filterbtn{border:1px solid #DCD6D0;border-radius:16px;background:#fff;padding:3px 12px;font-size:.82rem;color:#4D5149;text-decoration:none;display:inline-block;}
a.pwship-filterbtn:hover{border-color:#4D5149;color:#3C3C3B;}
a.pwship-filterbtn-on,a.pwship-filterbtn-on:hover{background:#006E7B;border-color:#006E7B;color:#fff;}
.pwship-sectionhead{display:flex;align-items:center;gap:10px;margin:28px 0 10px;padding:10px 14px 10px 0;background:#F1EEEA;border-top:3px solid #006E7B;border-radius:0 0 8px 8px;}
.pwship-sectionhead h2{margin:0;}
.pwship-collapse{border:0;background:none;padding:2px 8px;cursor:pointer;color:#4D5149;}
.pwship-collapse i{transition:transform .15s ease;}
.pwship-section-collapsed .pwship-collapse i{transform:rotate(-90deg);}
.pwship-section-collapsed .pwship-sectionbody{display:none;}
.pwship-selectall{display:inline-flex;align-items:center;align-self:center;margin-left:15px;width:28px;flex:none;cursor:pointer;}
.pwship-selectall input{width:16px;height:16px;accent-color:#006E7B;cursor:pointer;}
.pwship-sectionhead h2{font-size:.82rem;margin:0;text-transform:uppercase;letter-spacing:.1em;}
.pwship-swaghead h2{color:#4D5149;}
.pwship-sectioncount{font-family:Consolas,'Cascadia Mono',monospace;font-size:.8rem;color:#4D5149;}
.pwship-sectionhint{font-size:.8rem;color:#4D5149;font-style:italic;}
/* "Shipped but never scanned": these rows have already left the waiting queue, so they carry no
   select-all checkbox and no batch actions. Amber on the heading marks it as something to look at
   rather than as work still to do.
   The other section heads are inset by the select-all checkbox label that leads them (15px margin +
   28px box + the 10px flex gap); this one has no checkbox to offer, so it pays that inset back as
   padding and its title lines up with the rest instead of stair-stepping to the left edge. */
.pwship-unscannedhead{border-top-color:#E19717;padding-left:53px;}
.pwship-unscannedhead .pwship-collapse{margin-left:auto;}
/* Size row: its own line under the main filters because it narrows only the toques and t-shirts
   section, and because it is the control the operator drives a whole size run from. Pulled up
   against the row above so the two read as one filter block rather than two unrelated strips. */
.pwship-filters-size{margin-top:-6px;}
.pwship-filters-size .pwship-sectionhint{margin-left:6px;}
/* "Showing only run X". Stands in for the size row, which is hidden while a run is being viewed
   because its counts describe the whole queue and would be read as the rows on screen. */
.pwship-runview{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#E7ECF1;border:1px solid #D9CFCB;border-left:4px solid #3A5469;border-radius:8px;padding:9px 14px;margin:0 0 14px;font-size:.9rem;color:#3C3C3B;}
/* Open label runs. Teal top rule like the ordinary section heads, but no select-all and no
   collapse: a run in progress is the one thing on this screen that must not be tucked away. */
.pwship-runshead{padding-left:14px;}
.pwship-runrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #E7E2DD;border-radius:8px;padding:12px 14px;margin-bottom:8px;}
.pwship-runfacts{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px;}
.pwship-runheadline{font-weight:700;color:#3C3C3B;}
.pwship-runnames{font-size:.82rem;color:#3C3C3B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pwship-runsub{font-size:.8rem;color:#4D5149;}
/* The run's identity. Several runs are open at once and all carry the same green button, so this
   colour-coded size is the thing that stops the wrong one being pressed. Sized to be read across a
   packing bench, and each colour carries its own text at AA (amber and kraft take dark text). */
.pwship-runbadge{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:44px;padding:0 10px;border-radius:8px;font-weight:700;font-size:1.15rem;letter-spacing:.02em;}
.pwship-runbadge-xxs{background:#8FA4B5;color:#23313C;}
.pwship-runbadge-xs{background:#6C8AA3;color:#1F2B34;}
.pwship-runbadge-s{background:#3A5469;color:#fff;}
.pwship-runbadge-m{background:#006E7B;color:#fff;}
.pwship-runbadge-l{background:#4D5149;color:#fff;}
.pwship-runbadge-xl{background:#E19717;color:#3C3C3B;}
.pwship-runbadge-xxl{background:#A8710F;color:#fff;}
.pwship-runbadge-toque{background:#D9CFCB;color:#3C3C3B;}
.pwship-runbadge-other{background:#3C3C3B;color:#fff;font-size:.9rem;}
.pwship-runs .pwship-rowactions{display:flex;gap:6px;flex-wrap:wrap;}
/* The quick-edit dialog's buttons sit in a narrow footer where "Save address" wrapped onto two lines. */
#modEditAddress .modal-footer .btn{white-space:nowrap;}
.pwship-row{display:grid;grid-template-columns:28px 300px minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid #E7E2DD;border-radius:8px;padding:12px 14px;margin-bottom:8px;position:relative;}
.pwship-row-nocheck{grid-template-columns:300px minmax(0,1fr) auto;}
.pwship-row:hover{border-color:#DCD6D0;box-shadow:0 1px 4px rgba(60,60,59,.08);}
.pwship-rowcheck input{width:16px;height:16px;accent-color:#006E7B;}
.pwship-chip{position:relative;background:#fff;border:1px solid #DCD6D0;border-radius:6px;padding:9px 12px 10px;font-family:Consolas,'Cascadia Mono',monospace;font-size:.82rem;line-height:1.5;box-shadow:0 1px 2px rgba(60,60,59,.07);word-break:break-word;}
.pwship-chip-lg{font-size:.9rem;max-width:320px;white-space:pre-line;margin-bottom:8px;}
.pwship-chipname{font-weight:700;}
.pwship-chipcountry{color:#4D5149;font-size:.76rem;letter-spacing:.1em;}
.pwship-chipactions{position:absolute;right:6px;bottom:6px;display:flex;gap:4px;}
.pwship-iconbtn{border:1px solid #DCD6D0;background:#fff;border-radius:5px;width:26px;height:24px;font-size:.8rem;line-height:1;color:#4D5149;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;}
.pwship-iconbtn:hover{color:#006E7B;border-color:#006E7B;text-decoration:none;}
.pwship-tape{position:absolute;top:-7px;right:16px;height:15px;width:92px;transform:rotate(-2deg);border-radius:2px;opacity:.95;box-shadow:0 1px 2px rgba(60,60,59,.18);}
.pwship-tape-red{background:repeating-linear-gradient(45deg,#B3261E 0 9px,#E8B7B3 9px 18px);}
.pwship-tape-amber{background:repeating-linear-gradient(45deg,#E19717 0 9px,#F4DDB4 9px 18px);}
.pwship-tape-slate{background:repeating-linear-gradient(45deg,#3A5469 0 9px,#B9C4CE 9px 18px);}
.pwship-tape-teal{background:repeating-linear-gradient(45deg,#006E7B 0 9px,#B3D4D8 9px 18px);}
.pwship-facts{min-width:0;display:flex;flex-direction:column;gap:6px;}
.pwship-factline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.pwship-src{font-size:.72rem;font-weight:700;letter-spacing:.04em;border-radius:4px;padding:2px 7px;color:#fff;background:#3A5469;white-space:nowrap;}
.pwship-src-lwca{background:#006E7B;}
.pwship-src-pwk{background:#56683B;}
.pwship-src-ff{background:#9A4A0F;}
.pwship-src-amz{background:#3C3C3B;}
.pwship-items{font-size:.86rem;font-weight:600;}
.pwship-meta{font-size:.78rem;color:#4D5149;display:flex;gap:12px;flex-wrap:wrap;font-variant-numeric:tabular-nums;}
.pwship-pill{font-size:.74rem;border-radius:10px;padding:1px 9px;border:1px solid #DCD6D0;color:#4D5149;background:#FAF8F7;white-space:nowrap;}
/* Three shipping methods, three levels of loudness: postal mail is the quiet default (pale fill,
   muted text), tracked is filled slate so it cannot be mistaken for it, and courier stays loudest
   with the raised green fill. Each pill matches the colour of its row bar above. */
.pwship-pill-tracked{background:#3A5469;border-color:#3A5469;color:#FFFFFF;font-weight:600;}
.pwship-pill-courier{background:#008338;border-color:#008338;color:#FFFFFF;font-weight:700;letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.28);}
.pwship-age{font-family:Consolas,'Cascadia Mono',monospace;}
.pwship-age-warn{color:#7A5200;font-weight:700;}
.pwship-age-late{color:#B3261E;font-weight:700;}
.pwship-flagpill{font-size:.74rem;border-radius:10px;padding:1px 9px;font-weight:600;}
.pwship-flagpill-red{background:#F9E7E5;color:#B3261E;}
.pwship-flagpill-amber{background:#FCEFD8;color:#7A5200;}
.pwship-flagpill-slate{background:#E5EAEF;color:#3A5469;}
.pwship-flagpill-teal{background:#DCEBED;color:#006E7B;}
.pwship-rowactions{display:flex;gap:8px;align-items:center;}
.pwship-intakestrip{background:#FCEFD8;border-left:4px solid #E19717;border-radius:6px;padding:12px 16px;font-size:.9rem;color:#3C3C3B;}
.pwship-returnbox{border-top:1px solid #E7E2DD;padding-top:12px;}
/* ASP.NET CheckBox renders input+label with no gap and Bootstrap's .form-check spacing does not
   apply to it, so space the label off the box here (also makes the whole label clickable-looking) */
.pwship-check input[type=checkbox]{margin-right:8px;vertical-align:middle;}
.pwship-check label{cursor:pointer;vertical-align:middle;}
.pwship-row-courier{background:#EDF6F1;box-shadow:inset 4px 0 0 #008338;}
.pwship-row-tracked{background:#EFF1F3;box-shadow:inset 4px 0 0 #3A5469;}
/* The row whose address was just fixed. It stays where it is on the page, so this mark is the ONLY
   thing telling the operator which one they have done (the save deliberately does not scroll to a
   banner). It therefore has to win against .pwship-row, its hover, and the courier/tracked washes, so
   it is doubled up for specificity and placed after all of them. It HOLDS rather than fading: it used
   to run out after 2.6 seconds, which is shorter than reading the corrected address back, and the
   operator would look up to a queue that no longer showed which row they had just done. The JS clears
   it on the next action instead, so there is no animation here and nothing for reduced-motion to
   suppress. */
.pwship-row.pwship-row-saved,
.pwship-row.pwship-row-saved:hover{border-color:#006E7B;box-shadow:0 0 0 2px rgba(0,110,123,.3);background:#DFF0F1;}
/* Ship it, painted with the method the customer paid for. It carries the same wash and left rule as
   that shipment's row in the queue, so one colour follows the order from the list into the form, and
   the banner restates the method in the pill's own fill directly under the heading: the Carrier box
   cannot be reached without passing it. Postal mail is deliberately left unpainted, so any colour
   here means "this is not ordinary post" without the admin having to read a word. */
.pwship-shipit-tracked{background:#EFF1F3;border-left:4px solid #3A5469;border-radius:6px;padding:12px 14px;}
.pwship-shipit-courier{background:#EDF6F1;border-left:4px solid #008338;border-radius:6px;padding:12px 14px;}
.pwship-shipbanner{display:block;border-radius:4px;padding:8px 12px;margin:0 0 12px;font-size:.8rem;color:#FFFFFF;}
.pwship-shipbanner strong{text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.pwship-shipbanner-tracked{background:#3A5469;}
.pwship-shipbanner-courier{background:#008338;}
/* The two batch print buttons wear the colour of the paper they need loaded, the same two tones as the
   swatches in the fulfilment panel, so the tray to load is recognised before the label is read. The
   colour is held through hover and focus: it identifies the button rather than decorating it. */
/* MDB styles .btn-close for .alert-dismissible, where the alert is positioned and the button is taken
   out of the flow and pinned to its corner (position:absolute; top:0; right:0). This banner is a plain
   flex alert, so an unaltered .btn-close escapes to whatever ancestor happens to be positioned: the X
   is drawn over the banner but its hit area is not where it looks, and the click lands on nothing. Put
   it back in the row as an ordinary flex item, pushed right, with padding that matches its glyph. */
/* The outcome banner pins itself to the top of the window instead of being scrolled to. It used to
   drag the page up so it could be read, which threw the operator out of their place in a long queue;
   pinning it means the confirmation is legible wherever they are working and the page never moves.
   z-index sits at Bootstrap's sticky-top level, below the page-blocking overlay and below modals, so
   it can never cover a dialog or hide the fact that a request is still running. */
.pwship-actionbanner{position:sticky;top:0;z-index:1020;}
.pwship-bannerclose.btn-close{position:static;flex:0 0 auto;margin-left:auto;padding:.5rem;opacity:.65;}
.pwship-bannerclose.btn-close:hover,.pwship-bannerclose.btn-close:focus{opacity:1;}

/* What the customer paid to ship, on tracked and courier orders. It sits among plain lines of order
   detail and has to be found at a glance while choosing a carrier, so it is the one filled chip in
   that column, tinted to the method it belongs to. */
.pwship-shippaid{display:inline-block;border-radius:4px;padding:4px 10px;font-weight:700;line-height:1.35;}
.pwship-shippaid-tracked{background:#E5EAEF;color:#2C4257;border:1px solid #3A5469;}
.pwship-shippaid-courier{background:#DCEFE4;color:#00622A;border:1px solid #008338;}
/* A price-list lookup, not a payment we hold a record of. Deliberately the quietest of the three:
   no fill, normal weight and a dashed edge, so it can never be mistaken at a glance for the badges
   above, which state what the customer actually paid. */
.pwship-shippaid-est{background:transparent;color:#4D5149;border:1px dashed #8A847E;font-weight:400;}
/* Lettermail. Needed once the charge began showing on postal parcels too: without a third tone they
   fell into the tracked badge, whose #3A5469 is the very colour the Tracked method pill uses, so a
   lettermail parcel read as tracked in the one panel where method decides how it is packed and sent.
   Brand warm grey, deliberately quieter than either service tier. */
.pwship-shippaid-postal{background:#F3F0EE;color:#4D5149;border:1px solid #D9CFCB;}
.pwship-paperbtn{border-width:2px;}
.pwship-paperbtn.pwship-paper-parchment,.pwship-paperbtn.pwship-paper-parchment:hover,
.pwship-paperbtn.pwship-paper-parchment:focus{background:#D9CFCB;border-color:#B0A29C;color:#3C3C3B;}
.pwship-paperbtn.pwship-paper-white,.pwship-paperbtn.pwship-paper-white:hover,
.pwship-paperbtn.pwship-paper-white:focus{background:#FFFFFF;border-color:#8A847E;color:#3C3C3B;}
.pwship-intakestrip-link{font-weight:700;white-space:nowrap;}
.pwship-ratetable{width:100%;border-collapse:collapse;font-size:.82rem;}
.pwship-ratetable th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#4D5149;border-bottom:2px solid #006E7B;padding:4px 10px 4px 0;}
.pwship-ratetable td{border-bottom:1px solid #E7E2DD;padding:6px 10px 6px 0;vertical-align:top;}
.pwship-ratetable label{margin:0;cursor:pointer;}
.pwship-pill-familiar{font-size:.7rem;border-radius:10px;padding:1px 8px;font-weight:600;background:#DCEBED;color:#006E7B;white-space:nowrap;}
/* Whose documents are in the parcel, shown only where that differs from the ship-to name. A couples
   Print and Ship order sends both people's documents to the one buyer, so both parcels carry the
   same ship-to name; amber because this is the cue that stops the two being packed the wrong way
   round. Dark brand text on a light amber tint keeps it above AA. */
.pwship-docowner{display:inline-block;font-size:.7rem;border-radius:10px;padding:1px 8px;font-weight:600;
    background:#FDF1DC;color:#4D5149;border:1px solid #E19717;white-space:nowrap;}
/* The same pill for the ordinary parcel, whose documents belong to the person it is addressed to. The
   shipping department wants the owner on every document parcel, not only on the odd one out; keeping
   this case a quiet outline is what leaves the amber above still meaning "not for the person named on
   it". Deliberately a separate rule rather than a modifier on the one above, so the amber declarations
   are not touched at all. Brand grey on white, well clear of AA. */
.pwship-docowner-plain{display:inline-block;font-size:.7rem;border-radius:10px;padding:1px 8px;font-weight:600;
    background:#FFFFFF;color:#4D5149;border:1px solid #D9CFCB;white-space:nowrap;}
/* Fulfilment: one row per document, and within it one line per print job. A Print and Ship order is
   two jobs on two papers, so the paper leads each line and the font choices read as alternatives to
   pick between rather than as more things to print. The parchment swatch uses the brand's own warm
   tone, so the tray to load is recognisable at a glance rather than read word by word. */
.pwship-fulfil{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline;}
.pwship-fulfil-doc{font-weight:700;color:#3C3C3B;white-space:nowrap;padding:5px 0;}
.pwship-fulfil-jobs{padding:2px 0 6px;}
.pwship-fulfil-job{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding:3px 0;}
.pwship-fulfil-note{color:#6B6B6B;padding:5px 0;}
.pwship-paper{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
    border-radius:3px;padding:2px 7px;white-space:nowrap;min-width:74px;text-align:center;}
.pwship-paper-parchment{background:#D9CFCB;color:#4D5149;border:1px solid #CBBFBA;}
.pwship-paper-white{background:#FFFFFF;color:#4D5149;border:1px solid #C9C4BF;}
.pwship-fulfil-or{color:#6B6B6B;font-size:.78rem;}
/* An already-printed document keeps its print links, so a reprint never needs the order
   returned to the queue first. The rule and the date mark it as done; the links keep their
   full contrast, because dimming them would drop the text below AA. */
.pwship-fulfil-printed{border-left:3px solid #D9CFCB;padding-left:10px;}
.pwship-fulfil-printed .pwship-fulfil-note{font-style:italic;padding-bottom:2px;}
/* Below the narrow breakpoint the document name sits above its jobs instead of beside them */
@media (max-width: 575.98px){
    .pwship-fulfil{grid-template-columns:1fr;gap:0;}
    .pwship-fulfil-doc{padding:8px 0 0;}
}

.pwship-detail{background:#fff;border:1px solid #DCD6D0;border-radius:8px;padding:16px 18px;margin:0 0 18px;}
.pwship-h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#4D5149;margin:0 0 8px;}
.pwship-smalltext{font-size:.82rem;}
.pwship-batchbar{display:flex;gap:10px;align-items:center;margin:14px 0 20px;}
.pwship-batchbar-pinned{position:fixed;bottom:0;left:0;right:0;z-index:1028;margin:0;background:#FFFFFF;border-top:2px solid #006E7B;box-shadow:0 -2px 10px rgba(0,0,0,.10);padding:.6rem 1rem .6rem 1.5rem;}
@media (max-width: 900px){
  .pwship-row{grid-template-columns:24px minmax(0,1fr);}
  .pwship-row .pwship-facts,.pwship-row .pwship-rowactions{grid-column:2;}
  /* No checkbox column to reserve, so the whole row collapses to one column */
  .pwship-row-nocheck{grid-template-columns:minmax(0,1fr);}
  .pwship-row-nocheck .pwship-facts,.pwship-row-nocheck .pwship-rowactions{grid-column:1;}
}

/* ==========================================================================
   Weekly Executive Report (admin/admin_report_weekly.aspx) - pwwr- prefix
   ========================================================================== */
.pwwr-masthead{border-bottom:2px solid #3C3C3B;padding-bottom:10px;margin-bottom:12px;}
.pwwr-weekline{font-size:.85rem;color:#74706B;margin-top:2px;}
.pwwr-weekline b{color:#3C3C3B;font-weight:600;}
.pwwr-importtag{background:#F1EEEA;color:#605C57;border-radius:4px;padding:1px 7px;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;}
.pwwr-weekpick{width:auto;min-width:270px;display:inline-block;}
.pwwr-navbtn{min-width:34px;}
.pwwr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 20px;}
.pwwr-chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.02em;color:#74706B;
    background:#FFFFFF;border:1px solid #E7E2DC;border-radius:99px;padding:3px 11px;}
.pwwr-chip b{color:#3C3C3B;font-weight:600;}
.pwwr-chip .pwwr-dot{width:7px;height:7px;border-radius:50%;background:#177245;flex:0 0 auto;}
.pwwr-chip-warn{border-color:#EBD9B8;background:#FDF9F0;color:#7A5A12;}
.pwwr-chip-warn .pwwr-dot{background:#E19717;}
.pwwr-card{border:1px solid #E7E2DC;border-radius:12px;box-shadow:0 1px 2px rgba(60,60,59,.06);}
.pwwr-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#006E7B;margin-bottom:8px;}
.pwwr-h2{font-size:.95rem;font-weight:700;color:#3C3C3B;margin-bottom:2px;}
.pwwr-h3{font-size:.8rem;font-weight:700;color:#3C3C3B;margin:14px 0 8px;}
.pwwr-sub{font-size:.78rem;color:#74706B;margin-bottom:10px;}
.pwwr-kpirow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:16px;}
@media (max-width:1200px){.pwwr-kpirow{grid-template-columns:repeat(3,1fr);}}
@media (max-width:620px){.pwwr-kpirow{grid-template-columns:repeat(2,1fr);}}
.pwwr-kpi{display:flex;flex-direction:column;gap:5px;padding:13px 15px 11px;}
.pwwr-kpi-label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#74706B;}
.pwwr-kpi-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:#2E2D2C;line-height:1.05;font-feature-settings:"tnum" 1,"lnum" 1;}
.pwwr-deltas{display:flex;gap:5px;flex-wrap:wrap;}
.pwwr-delta{font-size:.66rem;font-weight:600;border-radius:5px;padding:2px 6px;background:#F1EEEA;color:#605C57;white-space:nowrap;}
.pwwr-delta-up{background:#E8F2EB;color:#177245;}
.pwwr-delta-down{background:#F9EAE8;color:#B3261E;}
.pwwr-spark{margin-top:2px;max-width:100%;}
.pwwr-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.72rem;color:#74706B;margin-bottom:6px;}
.pwwr-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;}
.pwwr-sw-line{height:3px;border-radius:2px;vertical-align:2px;}
.pwwr-segtable{font-size:.82rem;margin-bottom:0;}
.pwwr-segtable th{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#74706B;white-space:nowrap;}
.pwwr-segtable td{white-space:nowrap;color:#3C3C3B;font-feature-settings:"tnum" 1,"lnum" 1;}
.pwwr-segtable .pwwr-sw{width:8px;height:8px;margin-right:7px;}
.pwwr-totalrow td{border-top:2px solid #3C3C3B;font-weight:700;color:#2E2D2C;}
.pwwr-pos{color:#177245;font-weight:600;}
.pwwr-neg{color:#B3261E;font-weight:600;}
/* On table cells the segment table's own td colour outranks the bare class; restate at td level */
.pwwr-segtable td.pwwr-pos{color:#177245;}
.pwwr-segtable td.pwwr-neg{color:#B3261E;}
.pwwr-dim{color:#6F6A64;}
.pwwr-bignum{font-size:1.35rem;font-weight:700;color:#2E2D2C;letter-spacing:-.02em;font-feature-settings:"tnum" 1,"lnum" 1;}
.pwwr-bignum small{font-size:.72rem;font-weight:600;color:#74706B;letter-spacing:0;}
.pwwr-stackbar{display:flex;height:20px;border-radius:6px;overflow:hidden;margin:10px 0 8px;}
.pwwr-stackbar span{height:100%;border-right:2px solid #fff;}
.pwwr-stackbar span:last-child{border-right:none;}
.pwwr-statrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid #EFEBE6;font-size:.8rem;}
.pwwr-statrow:last-child{border-bottom:none;}
.pwwr-statlabel{color:#74706B;}
.pwwr-statvalue{font-weight:700;color:#2E2D2C;white-space:nowrap;font-feature-settings:"tnum" 1,"lnum" 1;}
.pwwr-platbars{margin:4px 0 2px;}
.pwwr-platrow{display:flex;align-items:center;gap:10px;padding:4px 0;}
.pwwr-platlabel{flex:0 0 110px;font-size:.78rem;font-weight:600;color:#3C3C3B;text-align:right;}
.pwwr-plattrack{flex:1 1 auto;background:#F1EEEA;border-radius:4px;height:15px;overflow:hidden;}
.pwwr-platbar{display:block;height:100%;background:#A65041;border-radius:4px 0 0 4px;}
.pwwr-platvalue{flex:0 0 76px;font-size:.78rem;font-weight:700;color:#3C3C3B;font-feature-settings:"tnum" 1,"lnum" 1;}
.pwwr-foot{font-size:.76rem;color:#74706B;line-height:1.7;border-top:1px solid #E7E2DC;padding-top:12px;margin-bottom:24px;}
.pwwr-foot b{color:#3C3C3B;font-weight:600;}
.pwwr-inputs .pwwr-inputtable{font-size:.8rem;}
.pwwr-inputs .pwwr-inputtable th{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#74706B;}
.pwwr-num{max-width:120px;text-align:right;}
.pwwr-label{font-size:.72rem;font-weight:600;color:#4D5149;}
.pwwr-srcnote{font-size:.7rem;color:#A19C95;white-space:nowrap;}
.pwwr-inputs .form-text.pwwr-hint{display:block;font-size:.68rem;color:#605C57;margin-top:2px;}
.pwwr-datatable td{font-size:.76rem;padding:.22rem .5rem;}
.pwwr-datatable th{font-size:.62rem;}
.pwwr-datatable-group{border-left:2px solid #E7E2DC;}
.pwwr-datatable th.pwwr-datatable-first,.pwwr-datatable td.pwwr-datatable-first{border-left:2px solid #EFEBE6;}
.pwwr-datatable-week{white-space:nowrap;font-weight:600;}
/* Week annotation + promo marker line under the source chips */
.pwwr-weeknote{margin:2px 0 14px;font-size:.85rem;color:#3C3C3B;}
.pwwr-promotag{background:#F7EAD2;color:#7A5208;border-radius:4px;padding:1px 8px;font-size:.75rem;font-weight:600;letter-spacing:.02em;}
.pwwr-notetext{color:#3C3C3B;}
/* Costco portion table: six columns inside a quarter-width card, so cells are extra tight */
.pwwr-portiontable td{font-size:.66rem;padding:.16rem .22rem;}
.pwwr-portiontable th{font-size:.56rem;padding:.16rem .22rem;}
/* Year-over-year pairing: each week's row is followed by the same week last year in grey.
   The current row drops its bottom border so a pair reads as one visual unit; the 2px top
   border on the current row is what separates one pair from the next. */
.pwwr-datatable tr.pwwr-datatable-cur td{border-top:2px solid #E7E2DC;border-bottom:0;}
.pwwr-datatable tr.pwwr-datatable-prior td{color:#6F6A64;background:#FBFAF8;font-size:.72rem;border-bottom:0;}
.pwwr-datatable tr.pwwr-datatable-prior.pwwr-totalrow td{font-weight:600;color:#6F6A64;}
/* The compact YoY percent-change row that closes each week triple */
.pwwr-datatable tr.pwwr-datatable-delta td{font-size:.62rem;padding:.1rem .5rem .22rem;border-top:0;}
.pwwr-datatable tr.pwwr-datatable-delta td.pwwr-datatable-week{font-weight:400;color:#6F6A64;font-style:italic;}
/* Per-site Sales/Profit pair at the end of each website block */
.pwwr-datatable th.pwwr-datatable-money,.pwwr-datatable td.pwwr-datatable-money{border-left:1px solid #EFEBE6;}

/* ==========================================================================
   Quarterly Board Report (admin/admin_report_quarterly.aspx) - pwqbr- prefix

   Only two things here are new: the readiness strip and the evidence chips.
   Everything else on that page reuses the pw-card / pw-pill / pw-statgrid
   vocabulary the affiliate and payouts admin pages already established.

   Four section states, and colour NEVER carries a state on its own: every
   segment and every card also shows a written label, so the page survives
   colour blindness and a greyscale print.
     reviewed #006E7B teal   drafted  #8F5D07 amber
     carried  #3A5469 slate  empty    #7A716C stone
   #008AA0 and #E19717 are deliberately NOT used: both fail WCAG AA on white,
   #E19717 failing even the 3:1 bar for non-text. The amber and the stone are
   darkened past their brand values for the same reason, found by measurement
   rather than by eye: as TEXT on white the brand-derived amber reached only
   3.63:1 and the pale stone only 1.52:1, against a 4.5:1 bar. The pale stone is
   still used for rules, fills and swatches, where the 3:1 non-text bar applies.
   ========================================================================== */
.pwqbr-masthead{border-bottom:2px solid #E7E2DC;padding-bottom:.75rem;margin-bottom:1rem;}
.pwqbr-periodline{color:#4D5149;font-size:.9rem;}
.pwqbr-datefield{max-width:190px;}
.pwqbr-hint{font-size:.78rem;color:#6F6A64;}
.pwqbr-warnhint{font-size:.78rem;color:#8F5D07;font-weight:600;}

/* Readiness strip. Sticky on purpose: this page exists to answer "what still
   needs me?", so that answer should never scroll out of view. It is also the
   navigation, each segment jumping to its section. */
.pwqbr-ready{position:sticky;top:0;z-index:5;background:#FFFFFF;border-bottom:1px solid #E7E2DC;padding:.8rem 0 .9rem;margin-bottom:1.25rem;}
.pwqbr-readrow{display:flex;align-items:center;gap:4px;}
.pwqbr-seg{flex:1 1 0;height:9px;border-radius:2px;display:block;background:#D9CFCB;text-decoration:none;}
.pwqbr-seg-reviewed{background:#006E7B;}
.pwqbr-seg-drafted{background:#8F5D07;}
.pwqbr-seg-carried{background:#3A5469;}
.pwqbr-seg-empty{background:#D9CFCB;}
.pwqbr-seg:focus-visible{outline:3px solid #006E7B;outline-offset:2px;}
.pwqbr-readmeta{margin-top:.6rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.9rem;}
.pwqbr-readcount{font-size:.9rem;font-weight:600;color:#3C3C3B;}
.pwqbr-readcount b{color:#8F5D07;font-variant-numeric:tabular-nums;}
.pwqbr-readcount.pwqbr-readdone b{color:#006E7B;}
.pwqbr-legend{display:flex;flex-wrap:wrap;gap:.95rem;font-size:.75rem;color:#4D5149;}
.pwqbr-legend span{display:inline-flex;align-items:center;gap:.4rem;}
.pwqbr-dot{width:9px;height:9px;border-radius:2px;display:inline-block;}

/* Source tiles: what the draft was actually built from, counted. */
.pwqbr-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin-bottom:1.5rem;}
.pwqbr-tile{background:#FFFFFF;border:1px solid #E7E2DC;border-radius:9px;padding:.7rem .85rem;}
.pwqbr-tilelabel{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6F6A64;}
.pwqbr-tileval{font-size:1.25rem;font-weight:600;margin-top:.1rem;font-variant-numeric:tabular-nums;color:#3C3C3B;}
.pwqbr-tilenote{font-size:.75rem;color:#4D5149;margin-top:.1rem;}
.pwqbr-tile-warn{border-color:#E4C68A;background:#FBF2E2;}
.pwqbr-tile-warn .pwqbr-tileval{color:#8F5D07;}

/* Section cards */
.pwqbr-card{background:#FFFFFF;border:1px solid #E7E2DC;border-radius:11px;padding:1.25rem 1.35rem 1.35rem;margin-bottom:1rem;display:grid;grid-template-columns:62px 1fr;column-gap:1.1rem;scroll-margin-top:90px;}
.pwqbr-num{font-size:1.9rem;font-weight:300;color:#7A716C;font-variant-numeric:tabular-nums;line-height:1;}
.pwqbr-card-reviewed .pwqbr-num{color:#006E7B;}
.pwqbr-card-drafted .pwqbr-num{color:#8F5D07;}
.pwqbr-card-carried .pwqbr-num{color:#3A5469;}
.pwqbr-body{display:flex;flex-direction:column;gap:.75rem;min-width:0;}
.pwqbr-cardhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;}
.pwqbr-cardhead h2,.pwqbr-cardhead h3{font-size:1.12rem;font-weight:600;margin:0;color:#3C3C3B;}
.pwqbr-guidance{font-size:.8rem;color:#6F6A64;margin:0;}
.pwqbr-pill{font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.25rem .7rem;border-radius:999px;white-space:nowrap;}
.pwqbr-pill-reviewed{background:#EAF4F5;color:#006E7B;}
.pwqbr-pill-drafted{background:#FBF2E2;color:#8F5D07;}
.pwqbr-pill-carried{background:#ECF0F4;color:#3A5469;}
.pwqbr-pill-empty{background:#F6F2F0;color:#4D5149;}

/* Evidence chips. A board report's credibility is its sourcing, so every
   drafted section names what it was built from and how much of it there was. */
.pwqbr-evidence{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;}
.pwqbr-evlead{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6F6A64;}
.pwqbr-chip{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid #E7E2DC;border-radius:4px;padding:.22rem .55rem;color:#4D5149;background:#FBF9F7;display:inline-flex;align-items:center;gap:.35rem;}
.pwqbr-chip b{color:#3C3C3B;font-variant-numeric:tabular-nums;}

.pwqbr-editor{width:100%;border:1px solid #C9C3BC;border-radius:7px;padding:.8rem .9rem;font-size:.92rem;line-height:1.6;color:#3C3C3B;background:#FFFFFF;min-height:150px;resize:vertical;}
.pwqbr-editor:focus{outline:3px solid #006E7B;outline-offset:1px;border-color:#006E7B;}
.pwqbr-editor[readonly]{background:#FBF9F7;color:#4D5149;}

/* Rich text sections (pw-rt): a block of stored text is READ as the document it becomes and
   EDITED in place under a formatting bar, so nobody meets the markup it is stored as. The
   component lives in .pw-rt and its buttons sit anywhere inside the surrounding .pw-rt-scope,
   which carries pw-rt-open while an editor is up. The behaviour is in MembersFunctions.js. */
.pw-rt{display:flex;flex-direction:column;gap:.75rem;min-width:0;}
.pw-rt .pw-rt-source,.pw-rt .pwqbr-guidance,.pw-rt .pw-rt-bar{display:none;}
.pw-rt-scope .pw-rt-onedit{display:none;}
.pw-rt-scope.pw-rt-open .pw-rt-onedit{display:inline-block;}
.pw-rt-scope.pw-rt-open .pw-rt-edit{display:none;}

/* Editing happens in the rendered block itself. Source text is the way out when the bar cannot
   say something: it hands over the stored markup, and the bar goes away with nothing to act on. */
.pw-rt.pw-rt-editing .pw-rt-bar{display:flex;}
.pw-rt.pw-rt-editing .pw-rt-read{display:block;min-height:7rem;border:1px solid #C9C3BC;border-radius:0 0 7px 7px;padding:.8rem .9rem;background:#FFFFFF;margin-top:-.75rem;}
.pw-rt.pw-rt-editing .pw-rt-read:focus{outline:3px solid #006E7B;outline-offset:-1px;border-color:#006E7B;}
.pw-rt.pw-rt-sourcemode .pw-rt-bar,.pw-rt.pw-rt-sourcemode .pw-rt-read{display:none;}
.pw-rt.pw-rt-sourcemode .pw-rt-source,.pw-rt.pw-rt-sourcemode .pwqbr-guidance{display:block;}
.pw-rt-bar{flex-wrap:wrap;gap:.25rem;align-items:center;border:1px solid #C9C3BC;border-bottom:0;border-radius:7px 7px 0 0;background:#FBF9F7;padding:.35rem .4rem;}
.pw-rt-tb{border:1px solid transparent;background:transparent;border-radius:5px;padding:.15rem .5rem;font-size:.82rem;line-height:1.5;color:#4D5149;cursor:pointer;}
.pw-rt-tb:hover{background:#FFFFFF;border-color:#E7E2DC;color:#3C3C3B;}
.pw-rt-tb:focus-visible{outline:3px solid #006E7B;outline-offset:1px;}
/* Bold inside a heading would do nothing a heading does not already do, so the button says so
   rather than appearing to work. */
.pw-rt-tb[aria-disabled="true"]{color:#A9A29A;cursor:default;}
.pw-rt-tb[aria-disabled="true"]:hover{background:transparent;border-color:transparent;color:#A9A29A;}
.pw-rt-tb-b{font-weight:700;min-width:2rem;}
.pw-rt-tb-i{font-style:italic;min-width:2rem;}
.pw-rt-tb-last{margin-left:auto;color:#6F6A64;}

/* The rendered block. Set to read like the page of the PDF it becomes: the same sub-headings,
   bullets and ruled tables, at the size the rest of the card is set in. */
.pw-rt-read{font-size:.92rem;line-height:1.65;color:#3C3C3B;min-width:0;overflow-x:auto;}
.pw-rt-read:empty{display:none;}
.pw-rt-read p{margin:0 0 .7rem;}
.pw-rt-read p:last-child,.pw-rt-read ul:last-child,.pw-rt-read ol:last-child,.pw-rt-read table:last-child{margin-bottom:0;}
.pw-rt-read h3{font-size:.95rem;font-weight:700;color:#3C3C3B;margin:1.1rem 0 .45rem;}
.pw-rt-read h3:first-child{margin-top:0;}
/* The markers are named on the items themselves, not just the list: the site strips them with a
   bare "li" rule that beats inheritance from the ul, which left bullets reading as loose lines. */
.pw-rt-read ul{margin:0 0 .7rem;padding-left:1.25rem;}
.pw-rt-read ol{margin:0 0 .7rem;padding-left:1.4rem;}
.pw-rt-read li{display:list-item;margin-bottom:.25rem;}
.pw-rt-read ul>li{list-style:disc outside;}
.pw-rt-read ol>li{list-style:decimal outside;}
.pw-rt-read table{border-collapse:collapse;width:100%;margin:0 0 .8rem;font-size:.85rem;font-variant-numeric:tabular-nums;}
.pw-rt-read th,.pw-rt-read td{border:1px solid #E7E2DC;padding:.32rem .55rem;text-align:left;vertical-align:top;}
.pw-rt-read th{background:#FBF9F7;color:#4D5149;font-weight:700;}
.pwqbr-carried{border-left:3px solid #3A5469;background:#ECF0F4;padding:.65rem .85rem;border-radius:0 6px 6px 0;font-size:.83rem;color:#4D5149;}
.pwqbr-carhead{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#3A5469;margin-bottom:.35rem;}
.pwqbr-empty{border:1px dashed #C9C3BC;border-radius:7px;padding:1rem;color:#4D5149;font-size:.88rem;background:#FBF9F7;}
.pwqbr-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.pwqbr-stamp{font-size:.76rem;color:#6F6A64;}
.pwqbr-stamp code{font-family:Consolas,"Courier New",monospace;font-size:.74rem;background:#FBF9F7;border:1px solid #E7E2DC;border-radius:3px;padding:0 .3rem;color:#4D5149;}

/* Charts: four pictures of the period, sitting between the sources and the prose
   so the writer sees the shape of the quarter before reading a word of the draft.
   Each chart is drawn twice, as a canvas here and as inline SVG in the PDF, and in
   both places a written legend and a caption carrying the headline figures do the
   work colour cannot: #A9A29A and #D9CFCB are below 3:1 on white, so the reading
   never depends on seeing them. */
.pwqbr-chartsec{font-size:1.12rem;font-weight:600;color:#3C3C3B;margin:0 0 .2rem;}
.pwqbr-chartlead{font-size:.82rem;color:#6F6A64;margin:0 0 .85rem;}
.pwqbr-charts{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem;}
.pwqbr-chartcard{background:#FFFFFF;border:1px solid #E7E2DC;border-radius:11px;padding:1rem 1.1rem 1.1rem;min-width:0;}
.pwqbr-chartwide{grid-column:1 / -1;}
.pwqbr-charttitle{font-size:.98rem;font-weight:600;color:#3C3C3B;margin:0 0 .15rem;}
.pwqbr-chartsub{font-size:.78rem;color:#4D5149;margin:0 0 .5rem;}
.pwqbr-chartcard .pwqbr-legend{margin-bottom:.55rem;}
/* Line series get a rule rather than the square a bar series carries, so the
   legend says which mark a reader is looking for as well as which colour. */
.pwqbr-rule{width:16px;height:3px;border-radius:2px;display:inline-block;}

@media (max-width:991.98px){
    .pwqbr-tiles{grid-template-columns:repeat(2,1fr);}
    .pwqbr-charts{grid-template-columns:1fr;}
}
@media (max-width:575.98px){
    .pwqbr-card{grid-template-columns:1fr;row-gap:.5rem;}
    .pwqbr-num{font-size:1.4rem;}
    .pwqbr-tiles{grid-template-columns:1fr;}
    .pwqbr-ready{position:static;}
}
/* Next step ---------------------------------------------------------------
   The one instruction on the page, and the only inverted surface in this block.
   Deliberately NOT a fifth tinted callout with a coloured left rule: this page
   already spends green on "just happened", amber on "needs your review", teal on
   "reviewed" and a slate left rule on "carried forward". Another variation on
   that theme would read as another kind of status rather than as the thing to do
   now. Inverting the surface separates it by form instead of by inventing a
   colour, which matters because the report is assembled four times a year and
   nobody arrives remembering the order of operations. */
.pwqbr-next{display:block;background:#3A5469;color:#FFFFFF;border-radius:8px;padding:1rem 1.15rem;margin-bottom:1.5rem;}
.pwqbr-next-eyebrow{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#D9CFCB;margin-bottom:.3rem;}
.pwqbr-next-lead{display:block;font-size:1.05rem;font-weight:600;line-height:1.35;color:#FFFFFF;}
.pwqbr-next-detail{display:block;font-size:.85rem;line-height:1.55;color:#E4E9EE;margin-top:.35rem;max-width:80ch;}

/* Busy overlay ------------------------------------------------------------
   Gathering reaches five outside systems and drafting makes one model call per
   section, so both run for minutes. A page that stops responding for that long
   reads as broken rather than busy. The elapsed counter is the part that does
   the real work here: a number still climbing is proof of life in a way a
   spinner is not, because a spinner keeps turning long after a request has died. */
.pwqbr-busy{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1080;display:flex;align-items:center;justify-content:center;background:rgba(60,60,59,.55);}
.pwqbr-busy-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;background:#FFFFFF;border-radius:12px;padding:1.6rem 1.9rem;max-width:min(90vw,30rem);box-shadow:0 10px 40px rgba(0,0,0,.25);}
.pwqbr-busy-spin{width:34px;height:34px;border-radius:50%;border:3px solid #D9CFCB;border-top-color:#006E7B;animation:pwqbr-spin .9s linear infinite;margin-bottom:.4rem;}
.pwqbr-busy-title{font-size:1.05rem;font-weight:600;color:#3C3C3B;}
.pwqbr-busy-detail{font-size:.85rem;color:#4D5149;line-height:1.5;}
.pwqbr-busy-elapsed{font-size:1.5rem;font-weight:300;color:#7A716C;font-variant-numeric:tabular-nums;margin-top:.2rem;}
@keyframes pwqbr-spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
    .pwqbr-seg{transition:none;}
    /* The counter carries on regardless, so stopping the spinner costs nothing:
       the proof that work is still happening is a number, not a movement. */
    .pwqbr-busy-spin{animation:none;}
}

/*********************************************************************************************************************************/
/* Featured side-nav item (ADMINISTRATION > Executive Dashboard)                                                                  */
/* Emphasis is carried by TYPE ONLY - brand teal at weight 600, icon included. Deliberately no filled background, no accent bar    */
/* and no border: a tinted block is already this nav's vocabulary for the CURRENT page (Site.css .sidenav-primary .active paints   */
/* exactly that), so any panel treatment here reads as "selected" and fights the real active state. Leaving the box model alone    */
/* also keeps the item on the same height and padding rhythm as its 18 siblings, so it reads as emphasised rather than bolted on.  */
/* Teal is unambiguous in this nav because nothing else uses it: the count badges own red and green.                               */
/* #006E7B, not #008AA0 - only the darker teal clears AA. Note the nav carries .bg-light, so text composites over #f8f9fa and NOT  */
/* white: #006E7B on #f8f9fa is 5.66:1, comfortably over the 4.5:1 needed for this 0.78rem text.                                   */
/* Hover deliberately inherits MDB's own hover wash, exactly like every other item; only the colour is re-asserted so the teal      */
/* survives MDB's hover-colour variable. Colour only, never transform: a transform here swallows the first click on touch.         */
/*********************************************************************************************************************************/
.sidenav-collapse .sidenav-link.sidenav-featured,
.sidenav-collapse .sidenav-link.sidenav-featured:hover,
.sidenav-collapse .sidenav-link.sidenav-featured:active,
.sidenav-collapse .sidenav-link.sidenav-featured:focus {
  color: #006E7B;
  font-weight: 600;
}

.sidenav-collapse .sidenav-link.sidenav-featured i {
  color: #006E7B;
}

.sidenav-collapse .sidenav-link.sidenav-featured:focus-visible {
  outline: 2px solid #006E7B;
  outline-offset: 2px;
}

/*********************************************************************************************************************************/
/* "After this purchase" membership expiry preview (members/upgrades.aspx Membership Length step)                                 */
/* Answers the question the red "Your Membership Expires" date provokes once an extension is selected: members were picking Life  */
/* and still seeing an expiry date above it, so they assumed a lifetime membership expires too. The line has to hold its own next  */
/* to that bold red date without turning into a second alert box, so it is a quiet tinted chip rather than an .alert: the same     */
/* small type as the block it sits in, sized to its content so it reads as a consequence of the selection, not a page-wide notice. */
/* Teal, not the .green-text used for the current-expiry "Never" (#4caf50 is only 2.8:1 on white and fails AA). #006E7B is 5.5:1   */
/* over the tint and 6.0:1 over white. The left accent bar carries the emphasis so the fill can stay faint.                        */
/*********************************************************************************************************************************/
.pw-new-expiry {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-left: 3px solid #006E7B;
  border-radius: 0.25rem;
  background-color: rgba(0, 138, 160, 0.08);
  color: #006E7B;
}

.pw-new-expiry .pw-new-expiry-icon {
  margin-right: 0.35rem;
}

.pw-new-expiry .pw-new-expiry-date {
  font-weight: 700;
}

/* Spaced with a margin rather than a literal space in the markup. A space between the PlaceHolder tag
   and the Localize control it wraps on the French page is a whitespace-only literal, which ASP.NET
   discards on render, so the note ran straight into the date there while rendering fine in English. */
.pw-new-expiry .pw-new-expiry-note {
  margin-left: 0.3rem;
}

/* Membership Upgrades: the couples-pricing note is a paragraph (as an h3 straight after the h1 it broke the heading
   order), so it takes the heading font it had as an h3 with the h5 class. */
p.pw-upgrades-couples-note {
  font-family: var(--h4-font-family);
  letter-spacing: var(--h4-letter-spacing);
}

/* A visually hidden MDB select label only names the control (the day and year of a Date of Birth, for example). MDB sizes
   the outline's notch from its label, so without this a hidden one leaves a small gap in the top border. */
.form-outline .select-label.visually-hidden ~ .form-notch .form-notch-middle {
  width: 0 !important;
}

/* ============================================================
   Keyholder wallet-card + phone-field styles (MyKeyholders / MyWalletCards), shared by the English and
   French member pages. The intl-tel flags-path CSS stays inline on each page because it needs the
   server-side cache-buster; these static rules belong here per the CSS guidelines.
   ============================================================ */

/* The Keyholder phone field is an intl-tel-input; its .iti wrapper suppresses MDB's form-outline border
   and floating label, so draw the outlined look here to match the sibling fields. The field always
   carries the flag and dial code, so the label stays permanently floated. */
.pw-tel-outline {
  position: relative;
}
.pw-tel-outline .iti {
  display: block;
  border: 1px solid #bdbdbd;
  border-radius: 0.25rem;
}
.pw-tel-outline:focus-within .iti {
  border-color: #006E7B;
  box-shadow: inset 0 0 0 1px #006E7B;
}
.pw-tel-outline .form-control,
.pw-tel-outline .form-control:focus {
  border: 1px solid transparent;
  box-shadow: none;
}
.pw-tel-outline .form-label {
  position: absolute;
  top: 0;
  left: 0.75rem;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 0.35rem;
  background-color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  color: #4d5149;
  pointer-events: none;
  z-index: 3;
}
.pw-tel-outline:focus-within .form-label {
  color: #006E7B;
}

/* "Prefer a printed plastic card?" disclosure on MyWalletCards. A native <details> (not an MDB
   accordion): it needs no JavaScript to open, so the toggle is always visible even where MDB's collapse
   does not init. */
.pw-printed-details {
  border: 1px solid #D9CFCB;
  border-radius: 0.25rem;
}
.pw-printed-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  font-weight: 600;
  color: #006E7B;
}
.pw-printed-summary::-webkit-details-marker {
  display: none;
}
.pw-printed-summary::after {
  content: "\203A";
  float: right;
  font-weight: 700;
  transition: transform 0.2s ease;
}
.pw-printed-details[open] > .pw-printed-summary::after {
  transform: rotate(90deg);
}
.pw-printed-summary:hover {
  background-color: #f5f5f5;
}
.pw-printed-summary:focus-visible {
  outline: 2px solid #006E7B;
  outline-offset: -2px;
}
.pw-printed-details[open] > .pw-printed-summary {
  border-bottom: 1px solid #D9CFCB;
}
.pw-printed-body {
  padding: 1rem;
}

/* Keep the vertical gap between the Keyholder detail rows (MyKeyholders) even when a value is blank (for
   example a Keyholder with no address on file). The gap lives on the value column's bottom margin, which
   collapses when that column is empty and therefore shorter than its label; a min-height on the value
   column keeps it at least one line tall so the margin still separates the rows. */
.row > label.col-md-4.fw-bold + div {
  min-height: 1.5rem;
}


/* ============================================================================
   MyPeople: person picker, person form, and the MyPeople page
   (controls/PersonPicker.ascx, controls/PersonForm.ascx, members/mypeople.aspx).
   Brand palette only. Selection is teal; amber marks something to fill in (a missing detail, or a form adding or
   editing someone) or to fix.
   Input borders are #4D5149 so the field edge keeps 3:1 contrast (WCAG 1.4.11).
   ============================================================================ */
.pp { margin: .25rem 0 .75rem; }
/* An empty status region collapses but stays in the accessibility tree, so text added later is announced */
.pp-status:empty { padding: 0; margin: 0; border-width: 0; }
.pp-status { border-left: 4px solid #006E7B; background: rgba(0,138,160,.06); border-radius: 0 8px 8px 0; padding: .65rem .9rem; margin: 0 0 .9rem; color: #3C3C3B; font-size: .9rem; }
.pp-back { margin: 0 0 .6rem; font-size: .9rem; }
.pp-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pp-list { display: flex; flex-direction: column; gap: 10px; }

.pp-row { position: relative; border: 2px solid #D9CFCB; border-radius: 10px; background: #fff; }
@media (hover: hover) {
    .pp-row:not(.is-disabled):hover { border-color: #008AA0; }
}
.pp-row.is-selected { border-color: #008AA0; background: rgba(0,138,160,.05); }
/* The site's radio styling adds MDB's form-check-input class; its size and disabled opacity must not show the native radio */
.pp-radio-input, .pp-row .pp-radio-input, .pp-row .pp-radio-input:disabled { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pp-row-label { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 0; width: 100%; cursor: pointer; color: #3C3C3B; font-weight: 400; }
.pp-row.is-disabled .pp-row-label { cursor: default; }
.pp-radio { width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid #4D5149; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.pp-radio-input:checked + .pp-row-label .pp-radio { background: #006E7B; border-color: #006E7B; }
.pp-radio-input:checked + .pp-row-label .pp-radio::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); margin-top: -3px; }
.pp-radio-input:disabled + .pp-row-label .pp-radio { border-color: #D9CFCB; background: #fff; }
/* MDB fades a disabled radio's whole label to half opacity, which took the reason a person cannot be chosen below
   3:1; a shaded background, the dashed border, and the empty radio mark the row as unavailable instead. The shade
   (sand over white, so #4D5149 text keeps about 6.7:1) also tells these rows apart from the white "Add someone
   new" row, which is dashed too, and stops inside the border so the dashes stay crisp. A chosen row keeps its
   selected look even when its person is no longer available. */
.pp-row .pp-radio-input:disabled + .pp-row-label { opacity: 1; }
.pp-row.is-disabled { border-style: dashed; }
.pp-row.is-disabled:not(.is-selected) { background: linear-gradient(rgba(217,207,203,.45), rgba(217,207,203,.45)), #FFFFFF; background-clip: padding-box; }
.pp-row.is-disabled .pp-name { color: #4D5149; }
.pp-radio-input:focus-visible + .pp-row-label { outline: 3px solid #006E7B; outline-offset: 2px; border-radius: 8px; }
/* The keyboard focus ring goes round the whole card, the person's details and links included, not only its first line;
   a browser without :has keeps the ring on the first line, above */
@supports selector(:has(*)) {
    .pp-radio-input:focus-visible + .pp-row-label { outline: none; }
    .pp-row:has(> .pp-radio-input:focus-visible) { outline: 3px solid #006E7B; outline-offset: 2px; }
}
.pp-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: rgba(0,138,160,.12); color: #006E7B; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.pp-avatar-org { background: #D9CFCB; color: #3C3C3B; }
.pp-avatar-none { background: #fff; border: 1px dashed #4D5149; color: #4D5149; }
.pp-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: .1rem; }
.pp-name { font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1rem; color: #3C3C3B; overflow-wrap: anywhere; }
.pp-rel { font-size: .9rem; color: #4D5149; }
.pp-note { flex-basis: 100%; font-size: .85rem; font-style: italic; color: #4D5149; }
.pp-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 60%; }
.pp-tag { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; border: 1px solid #D9CFCB; border-radius: 999px; padding: 2px 10px; font-size: .78rem; line-height: 1.5; color: #4D5149; background: #fff; overflow-wrap: anywhere; }
.pp-tag::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #008AA0; }
.pp-tag.pp-tag-poa::before { background: #3A5469; }
.pp-tag.pp-tag-lw::before { background: #E19717; }
.pp-tag.pp-tag-key::before { background: #4D5149; }
a.pp-tag { color: #006E7B; text-decoration: underline; }
a.pp-tag:hover, a.pp-tag:focus { color: #3A5469; }
a.pp-tag:focus-visible { outline: 3px solid #006E7B; outline-offset: 2px; }

.pp-details { display: none; padding: 0 16px 14px 106px; }
.pp-row.is-selected .pp-details { display: block; }
.pp-line { margin: 0 0 .25rem; font-size: .88rem; color: #4D5149; overflow-wrap: anywhere; }
/* The items wrap as a row with the divider in the gap; a divider that would open a new line falls outside the box and is
   clipped, so a wrapped line neither ends nor starts with one */
.pp-contact { display: flex; flex-wrap: wrap; column-gap: 1.2rem; overflow: hidden; }
.pp-contact span { position: relative; min-width: 0; }
.pp-contact span + span::before { content: ""; position: absolute; left: -.6rem; top: .3em; width: 1px; height: .9em; background: #D9CFCB; }
.pp-actions { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .5rem; }
.pp-link, .pp-link:visited { background: none; border: 0; padding: 0; color: #006E7B; text-decoration: underline; font-family: inherit; font-weight: 500; font-size: .9rem; line-height: inherit; text-align: left; cursor: pointer; }
/* On MyPeople these sit inside .members-page-content, whose "a { text-decoration: none }" outranks the rule above */
a.pp-link, a.pp-link:visited { text-decoration: underline; }
.pp-link:hover { color: #3A5469; }
.pp-link:focus-visible { outline: 3px solid #006E7B; outline-offset: 2px; }
/* "Choose someone else" opens a collapsed list, so it is offered only while the list is collapsed */
.pp-view:not(.is-collapsed) .pp-change { display: none; }

.pp-view.is-collapsed .pp-row:not(.is-selected) { display: none; }
.pp-view.is-collapsed .pp-add { display: none; }
.pp-add, .pp-add:visited { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 16px; border: 2px dashed #D9CFCB; border-radius: 10px; background: #fff; color: #006E7B; text-decoration: none; }
.pp-add:hover, .pp-add:focus { border-color: #008AA0; color: #006E7B; text-decoration: none; }
.pp-add:focus-visible { outline: 3px solid #006E7B; outline-offset: 2px; }
.pp-add-plus { width: 40px; height: 40px; flex: 0 0 40px; margin-left: 36px; border: 2px dashed #008AA0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; }
.pp-add-title { font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; }
.pp-add-sub { margin-left: .4rem; font-size: .88rem; color: #4D5149; }

.pp-needs { margin-top: .75rem; padding: 12px 14px 14px; border-left: 4px solid #E19717; border-radius: 0 8px 8px 0; background: rgba(225,151,23,.08); }
.pp-needs-intro { margin: 0 0 .75rem; font-size: .88rem; color: #3C3C3B; }
.pp-needs .pp-label { background: linear-gradient(rgba(225,151,23,.08), rgba(225,151,23,.08)), #FFFFFF; }
.pp-row.is-selected .pp-needs .pp-label { background: linear-gradient(rgba(225,151,23,.08), rgba(225,151,23,.08)), linear-gradient(rgba(0,138,160,.05), rgba(0,138,160,.05)), #FFFFFF; }
.pp-needs-address-head { display: flex; justify-content: flex-end; }
/* The strip's own "Save details" (and any problem with what was typed, just above it) */
.pp-needs .pp-error { margin: .75rem 0 0; }
.pp-needs-actions { margin-top: .75rem; }
/* A detail too long for this document (a relationship in the member's own words), above Edit details, marked as the strip is */
.pp-toolong { margin: .5rem 0 .35rem; padding: 8px 12px; border-left: 4px solid #E19717; border-radius: 0 8px 8px 0; background: rgba(225,151,23,.08); font-size: .88rem; color: #3C3C3B; }

.pp-errors:empty { display: none; }
/* A grid row's picker (Compact): a select and a plain "Add someone new" link */
.pp-compact { margin-top: .55rem; }
.pp-compact .pp-input { width: 100%; }
.pp-add.pp-add-compact, .pp-add.pp-add-compact:visited { display: inline-block; margin-top: .5rem; padding: 0; border: 0; border-radius: 0; background: none; color: #006E7B; text-decoration: underline; font-weight: 500; font-size: .9rem; }
.pp-add.pp-add-compact:hover { color: #3A5469; }
.pp-add-compact .pp-add-plus, .pp-add-compact .pp-add-sub { display: none; }
.pp-add-compact .pp-add-title { font-family: inherit; font-weight: 500; }
.pp-errors { margin-top: .5rem; }
/* Parsley's red is below 4.5:1 on the tinted panels and strips the pickers sit on: dark text, with an amber mark */
.pp .parsley-errormessage, .pp-form .parsley-errormessage, .mp .parsley-errormessage { color: #3C3C3B !important; border-left: 3px solid #E19717; padding-left: .45rem; }
/* Parsley empties the message once the field is corrected; the amber mark would otherwise stay behind as a stub */
.pp .parsley-errormessage:empty, .pp-form .parsley-errormessage:empty, .mp .parsley-errormessage:empty { display: none; }
.pp-hint { display: flex; align-items: flex-start; gap: .5rem; margin: .75rem 0 0; font-size: .85rem; color: #4D5149; }
.pp-hint i { color: #006E7B; margin-top: .2rem; }
.pp-hint a { color: #006E7B; text-decoration: underline; }
/* Site.css colours every link in a Bootstrap table #007bff (table.table a), about 4:1 on white, which also reached a picker
   placed in a grid row (the other-beneficiaries grid adds an individual there); the picker's links keep their own colour */
table.table .pp a.pp-link, table.table .pp a.pp-add, table.table .pp-hint a { color: #006E7B; }
table.table .pp a.pp-link:hover { color: #3A5469; }

/* Adding or editing someone is marked as the missing-details strip is (.pp-needs): the amber bar on a tint of it. The tint
   is laid over white, so a panel looks the same on any background (a striped grid row, a tinted card) and the floating
   labels inside can match it exactly. The same look on a family page's form, MyPeople's Add a person, and a MyPeople card
   being edited (.pp-roster-form, .mp-form-card, .mp-card.is-editing) */
.pp-form-panel { padding: 16px 18px; border-left: 4px solid #E19717; border-radius: 0 10px 10px 0; background: linear-gradient(rgba(225,151,23,.08), rgba(225,151,23,.08)), #FFFFFF; }
.pp-form-panel .pp-label, .pp-roster-form .pp-label, .mp-form-card:not(.mp-merge) .pp-label, .mp-card.is-editing .pp-label { background: linear-gradient(rgba(225,151,23,.08), rgba(225,151,23,.08)), #FFFFFF; }
/* A refused save inside an amber panel is a white box, so it stands out from the panel it is marked like */
.pp-form-panel .pp-error, .pp-roster-form .pp-error, .mp-form-card:not(.mp-merge) .pp-error, .mp-card.is-editing .pp-error, .pp-needs .pp-error { background: #FFFFFF; }
/* The charity search in an add form (a beneficiary that is a charity): Redesign.css paints every .form-label white
   (!important), so the search label, and a manual-entry label once it floats onto its field's edge (in the states
   Redesign.css floats it: focused, .active, or :not(:placeholder-shown), which is always true for a field with no
   placeholder), take the panel's tint over that white. The hint's #6c757d is 4.4:1 on the tint, so it is darkened to
   keep 4.5:1 */
.pp-form-panel .charity-picker .cp-search-label,
.pp-form-panel .charity-picker .form-outline .form-control:focus ~ .form-label,
.pp-form-panel .charity-picker .form-outline .form-control.active ~ .form-label,
.pp-form-panel .charity-picker .form-outline .form-control:not(:placeholder-shown) ~ .form-label { background-image: linear-gradient(rgba(225,151,23,.08), rgba(225,151,23,.08)); }
.pp-form-panel .charity-picker .cp-hint { color: #4D5149; }
.pp-form-title { margin: 0 0 .9rem; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1.05rem; color: #3C3C3B; }
.pp-form-intro { margin: 0 0 1rem; font-size: .9rem; color: #4D5149; }
.pp-saved-address { margin: -.25rem 0 .75rem; font-size: .88rem; color: #3C3C3B; }
.pp-error { margin: 0 0 1rem; padding: .6rem .9rem; border-left: 4px solid #E19717; border-radius: 0 8px 8px 0; background: rgba(225,151,23,.08); font-size: .9rem; color: #3C3C3B; }
.pp-error ul { margin: 0; padding-left: 1.1rem; }
.pp-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.btn.pp-btn-primary, .btn.pp-btn-secondary { border-radius: 4px; font-weight: 600; text-transform: none; font-size: .9rem; padding: .5rem 1.1rem; box-shadow: none; }
.btn.pp-btn-primary { background: #006E7B; border: 1px solid #006E7B; color: #fff; }
.btn.pp-btn-primary:hover, .btn.pp-btn-primary:focus { background: #3A5469; border-color: #3A5469; color: #fff; }
.btn.pp-btn-secondary { background: #fff; border: 1px solid #4D5149; color: #3C3C3B; }
.btn.pp-btn-secondary:hover, .btn.pp-btn-secondary:focus { border-color: #006E7B; color: #006E7B; }
/* These buttons render as <input>, and Site.css removes every input outline with !important */
.btn.pp-btn-primary:focus-visible, .btn.pp-btn-secondary:focus-visible { outline: 3px solid #006E7B !important; outline-offset: 2px; }

.pp-field { position: relative; margin-top: .55rem; }
.pp-field .pp-input { min-height: 44px; padding: .7rem .75rem .5rem; border: 1px solid #4D5149; border-radius: 4px; background-color: #fff; color: #3C3C3B; font-size: .95rem; }
.pp-field .pp-input:focus { border-color: #006E7B; box-shadow: 0 0 0 2px #006E7B; outline: none; }
/* The padding above would otherwise run a long choice under the select's arrow */
.pp-field select.pp-input { padding-right: 2.25rem; }
.pp-label { position: absolute; top: -.6rem; left: .6rem; max-width: calc(100% - 1.2rem); margin: 0; padding: 0 .3rem; background: #fff; color: #4D5149; font-size: .78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-req { color: #006E7B; font-weight: 700; }
.pp-rel-other { display: none; }
.is-rel-other > .pp-rel-other { display: block; }
.pp-form .pp-name-label-org { display: none; }
.pp-form.is-org .pp-name-label-org { display: inline; }
.pp-form.is-org .pp-name-label-person, .pp-form.is-org .pp-person-only { display: none; }
.pp-org-toggle { margin-bottom: .9rem; }
.pp-address-head { display: flex; justify-content: space-between; align-items: baseline; margin: 1.2rem 0 .1rem; }
.pp-address-title { font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: .9rem; color: #3C3C3B; }
.pp-more-phones { margin-top: .8rem; }
.pp-more-phones-fields { display: none; }
.pp-form.is-more-phones .pp-more-phones-fields { display: flex; }
.pp-form.is-more-phones .pp-more-phones-toggle { display: none; }

@media (max-width: 767.98px) {
    .pp-row-label { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
    .pp-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: .75rem; }
    .pp-main { flex-basis: calc(100% - 90px); }
    .pp-tags { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-left: 76px; }
    .pp-details { padding: 0 12px 12px 12px; }
    .pp-add-plus { margin-left: 0; }
}

/* Phones: most wizard pages host the picker in a grey .p-5 panel (3rem a side), often inside an .indent, which
   left the card about 165px wide at 375px. Trim that panel only where it holds a picker (browsers without :has()
   keep the old padding), and start the tags under the avatar rather than under the name. */
@media (max-width: 575.98px) {
    .row.bg-light.p-5:has(.pp) { padding: 1.25rem .75rem !important; }
    .pp-tags { padding-left: 32px; }
    .pp-form-panel { padding: 14px 12px; }
}

/* Phones: a picker in a grid row sits in a table cell after the numbering column, inside the cell's padding and a form's
   .p-4. The other-beneficiaries grid adds an individual there, and its cards were about 176px wide at 375px (a name broke
   a word to a line); the guardians and pet-care grids hold compact pickers the same way. Only rows that hold a picker
   are trimmed, with the required-information note's negative margin that would now reach past the cell. */
@media (max-width: 575.98px) {
    .table > :not(caption) > tr:has(> td > .horizontalform .pp) > td { padding-left: .5rem; padding-right: .5rem; }
    .table td > .horizontalform.p-4:has(.pp) { padding-left: .25rem !important; padding-right: .25rem !important; }
    .table td > .horizontalform.p-4:has(.pp) .ms-n3 { margin-left: 0 !important; }
}

/* The picker is also placed in narrow columns on wide screens (a .p-5 panel beside the open help sidebar, a table
   cell), where the desktop row squeezed names to a few letters a line, so the list and the form also follow their
   own width. Browsers without container queries keep the viewport rules above. The list's container is its fieldset,
   never .pp-list itself: with the list (a flex column whose rows the collapsed view hides) as the container, Chrome at
   times drew no box for the chosen row on a page load, so the collapsed picker showed nobody at all. */
.pp-fieldset, .pp-form { container-type: inline-size; }
/* 38rem, not 34rem: a list about 35rem wide (a stacked grid cell on a large monitor) gave three role tags so much of the
   row that a name broke one word a line */
@container (max-width: 38rem) {
    .pp-row-label { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
    .pp-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: .75rem; }
    .pp-main { flex-basis: calc(100% - 90px); }
    .pp-tags { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-left: 76px; }
    .pp-details { padding: 0 12px 12px 12px; }
}
@container (max-width: 22rem) {
    .pp-tags { padding-left: 32px; }
}
/* Wider than that the tags sit beside the name, and the wizard's own list at 1440px is just wider (about 38rem): three or
   four tags there left the name a column of one word a line, so up to 46rem three or more drop under the name, and beside
   one or two the name keeps at least 10rem */
@container (width > 38rem) {
    .pp-main { min-width: 10rem; }
}
@container (38rem < width <= 46rem) {
    .pp-row-label:has(.pp-tags .pp-tag:nth-child(3)) { flex-wrap: wrap; row-gap: 6px; }
    .pp-row-label:has(.pp-tags .pp-tag:nth-child(3)) .pp-main { flex-basis: calc(100% - 90px); }
    .pp-row-label:has(.pp-tags .pp-tag:nth-child(3)) .pp-tags { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-left: 90px; }
}
@container (max-width: 40rem) {
    .pp-form .row > [class*="col-md-"] { width: 50%; }
    .pp-form .row > .col-md-8, .pp-form .row > .col-md-8 + .col-md-4 { width: 100%; }
}
@container (max-width: 26rem) {
    .pp-form .row > [class*="col-md-"] { width: 100%; }
}
/* From 40rem the address's city, province, postal code, and country share one line, where the postal code's sixth cut its
   own label short ("Postal co...", "Code pos...") until the form is about 46rem wide: two to a line until then */
@container (min-width: 40rem) and (max-width: 46rem) {
    .pp-form .row > .col-md-4 + .col-md-4, .pp-form .row > .col-md-3, .pp-form .row > .col-md-2 { width: 50%; }
}
/* The needs strip sits in the chosen row's indented details, so its boxes follow the strip's own width: two to a line,
   then one, and the postal code box never shrinks below its label */
.pp-needs { container-type: inline-size; }
@container (max-width: 48rem) {
    .pp-needs .row > [class*="col-md-"] { width: 50%; }
    .pp-needs .row > .col-md-8, .pp-needs .row > .col-12 { width: 100%; }
}
@container (max-width: 28rem) {
    .pp-needs .row > [class*="col-md-"] { width: 100%; }
}

/* The keyholder page's "Fill in from MyPeople": what to check after filling in */
.pp-fill-note { max-width: 860px; margin: -.5rem 0 1.5rem; padding: .6rem .9rem; border-left: 4px solid #E19717; border-radius: 0 8px 8px 0; background: rgba(225,151,23,.08); font-size: .9rem; color: #3C3C3B; }
.pp-fill-note:focus { outline: 3px solid #006E7B; outline-offset: 2px; }
/* The administrator's personal information report: a long unbroken value wraps instead of widening the page */
.mp-report { overflow-wrap: anywhere; }
/* The guardians grid's Reason box, between two picker selects: the same box, with its long label above it */
.pp-reason { margin: .9rem 0 1rem; }
.pp-reason .pp-static-label { display: block; margin: 0 0 .35rem; padding: 0; font-size: .85rem; font-weight: 400; line-height: 1.3; color: #4D5149; }
.pp-reason .form-text { display: block; margin-top: .35rem; font-size: .82rem; color: #4D5149; }

/* Member side nav: labels wrap onto a second line instead of being cut short ("Lien vers le conjoint/partenai..."). The nav
   is placed over the page, so MembersFunctions.js (pwFitMembersSideNav) keeps the page at least as tall as the nav. */
#members-sidenav .sidenav-link { height: auto; min-height: 1.5rem; padding-top: .2rem; padding-bottom: .2rem; white-space: normal; overflow: visible; line-height: 1.25; }
#members-sidenav .sidenav-heading, #members-sidenav .sidenav-link span { white-space: normal; }
/* An administrator count under its link (an a.sidenav-link.pb-2 followed by a span.sidenav-link.pt-2) sits just below it, as
   it did when every row had a fixed height: the two padding utilities only placed the text inside those fixed rows, and now
   that rows fit their text they would open a gap above the count instead */
#members-sidenav a.sidenav-link.pb-2 { padding-bottom: .2rem !important; }
#members-sidenav span.sidenav-link.pt-2 { padding-top: 0 !important; }
/* A full-width column that is also indented (.indent adds a 35px margin) no longer runs past the page's right edge */
.row > .indent.col-12 { width: calc(100% - 35px); }
/* Long French headings ("MesDétenteursdeClés - Ajouter un nouveau DétenteurdeClé") break instead of widening the page */
.member-pages h1, .member-pages h2, .member-pages h3 { overflow-wrap: break-word; }
/* Headings moved from h5 to h3 (h4 inside a section) so the outline follows the page's h2 title, drawn exactly as the h5
   they replaced: Redesign.css's h5 rule, at the same element-only specificity (":where" adds none), so any class on the
   heading (card-title, black-bold-text, pw-notify-executor-title) still wins as it did. Not ".h5": MDB draws that larger
   and lighter, and other member pages already use it on h3s. */
h3:where(.pw-h5), h4:where(.pw-h5) { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); font-style: var(--h6-font-style); color: var(--dark-uidark-10); }
@media only screen and (min-width: 576px) {
    h3:where(.pw-h5), h4:where(.pw-h5) { font-family: var(--h5-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); font-style: var(--h5-font-style); }
}
/* Headings moved from h3 to h2 (the Mirror Will pages' three steps, which followed the page's h1 directly), drawn exactly
   as Redesign.css draws an h3, with an h3's margin rather than an h2's 20px */
h2:where(.pw-h3) { font-family: var(--h4-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); font-style: var(--h4-font-style); color: var(--dark-uidark-10); margin-bottom: .5rem; }
@media only screen and (min-width: 576px) {
    h2:where(.pw-h3) { font-family: var(--h3-font-family); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing); font-style: var(--h3-font-style); }
}
/* The same for headings moved from h4 to h3 (the distribution pages' section headings under the page's h2 title), drawn
   exactly as Redesign.css draws an h4 */
h3:where(.pw-h4) { font-family: var(--h5-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); font-style: var(--h5-font-style); color: var(--dark-uidark-10); }
@media only screen and (min-width: 576px) {
    h3:where(.pw-h4) { font-family: var(--h4-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); font-style: var(--h4-font-style); }
}
/* The same for headings moved from h6 to h3 (the trusts pages' two callout titles under the page's h2 title), drawn
   exactly as Redesign.css draws an h6. Not ".h6": MDB draws that larger (16px, line-height 1.2) */
h3:where(.pw-h6) { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); font-style: var(--h6-font-style); color: var(--dark-uidark-10); }
/* The same for headings moved from h6 to h5 (Review Your Choices' Family Status subheadings, under the section's h4, on the Will
   and Expatriate Will pages), drawn exactly as Redesign.css draws an h6: from 576px an h5 is 2px larger */
h5:where(.pw-h6) { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); font-style: var(--h6-font-style); color: var(--dark-uidark-10); }
/* A hint line on a pale grid row, where MDB's muted grey falls just under 4.5:1 (the provision rows on the distribution
   pages; their script finds the line by its form-text and text-muted classes, so those stay) */
.form-text.text-muted.pw-text-aa { color: #4D5149 !important; }
/* The amber callouts' titles (gifts, plan summaries, final plan, review, start, and revocation pages): amber text on the
   callout's #FDF6EC is 2.3:1, so the title is dark and the amber stays in the border and the icon */
.pw-callout-title { color: #3C3C3B; }
/* The side navigation's current page: MDB draws it #1266F1 on a 5% blue tint (4.45:1); brand teal reads at AA */
.sidenav .sidenav-link.active { color: #006E7B; }
/* Print & Ship and Legal Document Review: the document table's status words ("Never", "Unknown", printed before the last
   change, "Pending") and its links at AA, in brand colours. The shared .red-text is #FF0000 (4:1), so the words that need
   attention are dark and bold instead; the shared .green-text ("Pending") is #4CAF50 (2.8:1), so it is brand teal; the
   default link blue is 4:1, or 3.3:1 in an alert */
.pw-doc-order .red-text { color: #3C3C3B !important; font-weight: 600; }
.pw-doc-order .green-text { color: #006E7B !important; }
.pw-doc-order .form-check-label a { color: #006E7B; }
.pw-doc-order .alert a { color: inherit; text-decoration: underline; }
/* My Estate Plan (percentcomplete): the summary lines and each service's "still to do" line were h5/h6 straight after the h1,
   which broke the heading order. They are now paragraphs drawn as Redesign.css drew those headings (as the h3:where rules
   above do), with a heading's margin; inside the summary box an h5 line was 1rem at every width (Site.css). Not ".h5" or
   ".h6": MDB draws those in another face, weight, and line height */
p:where(.pw-h5) { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); font-style: var(--h6-font-style); color: var(--dark-uidark-10); margin-bottom: .5rem; }
@media only screen and (min-width: 576px) {
    p:where(.pw-h5) { font-family: var(--h5-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); font-style: var(--h5-font-style); }
}
p:where(.pw-h6) { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); font-style: var(--h6-font-style); color: var(--dark-uidark-10); margin-bottom: .5rem; }
.perc-complete .pw-h5 { font-size: 1rem; }
/* ...its "Congratulations!" and the percentage, in brand colours (they were green and #176fc1) */
.perc-complete .pw-h5 strong { color: #006E7B; font-weight: bold; }
.perc-complete .pw-h6 span { color: #3A5469; }
/* ...and the links in its steps still to take (the list, and each service's "still to do" line) sit inside the text, so they are
   underlined to stand out from it */
.perc-complete li a, .pw-plan-todo a { text-decoration: underline; }
/* The "Click", "Print", and "Sign" labels on each service's main menu: white on Site.css's #65a7dd was 2.6:1, so the label
   takes brand teal (5.6:1) */
.linksection .header { background: #006E7B; }
/* ...and the bold service links in their text (Site.css's .bold-link a, #65a7dd at 2.6:1) */
.bold-link a { color: #006E7B; }
/* The residue grids whose rows hold a substitute list (alternate residue, contingency): on a phone a row's share and its
   provisions stack, so the list has the screen's width instead of the narrow second column of a sideways-scrolling table */
@media (max-width: 575.98px) {
    .pw-grid-stack > tbody > tr > td { display: block; width: 100% !important; }
    .pw-grid-stack > tbody > tr > td + td { border-top-width: 0; }
}
/* The wizard header's "For <name>" line (WizardResp.master): MDB's 50% grey was about 2.9:1 */
.pw-for-member { color: #4D5149; }
/* Member home page (default.aspx): "STILL TO DO:", its "Buy now" link, and the referral banner's words and amounts, in brand
   colours that reach 4.5:1. MDB's 50% grey and green, and the blue on the green alert (.paid-member span), did not. */
.pw-home-todo { color: #4D5149; }
a.pw-home-buy { color: #006E7B; }
a.pw-home-buy:hover, a.pw-home-buy:focus { color: #3A5469; }
.paid-member .pw-referral span { color: #006E7B; }
/* MDB's .btn-info (white on #54B4D3, about 2.4:1), used for the grids' Edit and Delete buttons and the wizard pages' Delete
   buttons, in brand teal. Wizard pages sit in .PWwizardcontent rather than .members-page-content. The wizard's Back, Save,
   and Next group keeps its own style (Site.css .btn_group). Member Admin's buttons keep their own colours (.admin-accessible
   .btn-info, below) */
.members-page-content .btn.btn-info:not(.btn_group .btn, .admin-accessible .btn),
.PWwizardcontent .btn.btn-info:not(.btn_group .btn) { background-color: #006E7B; border-color: #006E7B; color: #FFFFFF; }
.members-page-content .btn.btn-info:not(.btn_group .btn, .admin-accessible .btn):hover, .members-page-content .btn.btn-info:not(.btn_group .btn, .admin-accessible .btn):focus,
.PWwizardcontent .btn.btn-info:not(.btn_group .btn):hover, .PWwizardcontent .btn.btn-info:not(.btn_group .btn):focus { background-color: #3A5469; border-color: #3A5469; color: #FFFFFF; }
.members-page-content .btn.btn-info:not(.btn_group .btn, .admin-accessible .btn):focus-visible,
.PWwizardcontent .btn.btn-info:not(.btn_group .btn):focus-visible { outline: 3px solid #006E7B !important; outline-offset: 2px; }
/* Membership length options (Upgrades and the sign-up cart): the MOST POPULAR tag's star is decorative, in brand orange */
.pw-tag-star { color: #E19717; }
/* Member home page, each service's percentage: MDB's text-dark at 25% and 50% opacity was about 1.6:1 and 2.9:1 on white,
   so a service not started yet is set apart by weight rather than by a faint colour. The "STILL TO DO:" label shares the
   panel and keeps the row's weight (.black-bold-text); the "Buy now" link has its own weight from the site's link style */
.pw-home-pct { color: #4D5149; }
.pw-home-pct.pw-home-pct-none { font-weight: 400; }
.pw-home-pct-none .pw-home-todo { font-weight: 900; }
/* A trademark mark inside a link on an alert takes the link's colour: the site-wide .supmark colour (#3A5469) all but
   disappears on the dark "Important" alert of the wizard's personal details page */
.alert a .supmark { color: inherit !important; }

/* MyPeople page (members/mypeople.aspx): one card per person, grouped by relationship */
.mp-intro { max-width: 66ch; margin: .25rem 0 1.25rem; color: #4D5149; }
.mp-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; max-width: 860px; margin: 0 0 1.25rem; padding: .9rem 1.1rem; border: 1px solid #D9CFCB; border-left: 4px solid #008AA0; border-radius: 0 10px 10px 0; background: #fff; }
.mp-suggest p { margin: 0; max-width: 60ch; color: #3C3C3B; }
.mp-status { max-width: 860px; }
.mp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 860px; margin-bottom: 1.25rem; padding: .9rem 0; border-top: 1px solid #D9CFCB; border-bottom: 1px solid #D9CFCB; }
.mp-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; color: #4D5149; }
.mp-stats b { margin-right: .15rem; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.05rem; color: #006E7B; }
.mp-group { margin: 1.5rem 0 .6rem; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1rem; color: #4D5149; }
.mp-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: start; max-width: 860px; margin-bottom: 10px; padding: 14px 18px; border: 1px solid #D9CFCB; border-radius: 10px; background: #fff; }
.mp-card.is-attention { border-color: #E19717; }
.mp-card.is-editing { display: block; border: 0; border-left: 4px solid #E19717; border-radius: 0 10px 10px 0; background: linear-gradient(rgba(225,151,23,.08), rgba(225,151,23,.08)), #FFFFFF; }
.mp-card .mp-avatar { width: 46px; height: 46px; flex-basis: 46px; font-size: .95rem; }
.mp-name { margin: 0; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.4; color: #3C3C3B; overflow-wrap: anywhere; }
/* One box after a plain space: a relationship that moves to the next line starts flush, and stays whole when it fits */
.mp-rel { display: inline-block; font-weight: 400; font-size: .88rem; color: #4D5149; }
.mp-line { margin: .2rem 0 0; font-size: .88rem; color: #4D5149; overflow-wrap: anywhere; }
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: .6rem 0 0; padding: 0; list-style: none; }
.mp-none { margin: .6rem 0 0; font-size: .85rem; font-style: italic; color: #4D5149; }
.mp-acts { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.mp-acts .pp-link { display: inline-flex; align-items: center; min-height: 24px; }
.mp-warn { margin-top: .75rem; padding: .6rem .9rem; border-left: 4px solid #E19717; border-radius: 0 8px 8px 0; background: rgba(225,151,23,.08); font-size: .88rem; color: #3C3C3B; }
.mp-warn a { color: #006E7B; text-decoration: underline; }
.mp-warn:focus { outline: 3px solid #006E7B; outline-offset: 2px; }
.mp-warn .pp-link { margin-left: .35rem; font-size: .88rem; }
.mp-confirm { margin-top: .75rem; padding: .7rem .9rem; border-left: 4px solid #3A5469; border-radius: 0 8px 8px 0; background: rgba(58,84,105,.07); }
.mp-confirm-text { margin: 0 0 .6rem; font-size: .9rem; color: #3C3C3B; }
.mp-confirm-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.mp-saved { margin: .75rem 0 0; padding: .6rem .9rem; border-left: 4px solid #006E7B; border-radius: 0 8px 8px 0; background: rgba(0,138,160,.06); font-size: .88rem; color: #3C3C3B; }
.mp-form-card { max-width: 860px; margin: 0 0 1.25rem; padding: 16px 18px; border: 1px solid #008AA0; border-radius: 10px; background: #fff; }
/* Add a person, as every add or edit form is (.pp-form-panel); the merge review keeps the plain card */
.mp-form-card:not(.mp-merge) { border: 0; border-left: 4px solid #E19717; border-radius: 0 10px 10px 0; background: linear-gradient(rgba(225,151,23,.08), rgba(225,151,23,.08)), #FFFFFF; }
.mp-empty { max-width: 620px; padding: 2rem; border: 2px dashed #D9CFCB; border-radius: 12px; text-align: center; }
.mp-empty-title { margin: 0 0 .4rem; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1.1rem; color: #3C3C3B; }
.mp-empty p { max-width: 48ch; margin: 0 auto 1rem; font-size: .9rem; color: #4D5149; }

@media (max-width: 767.98px) {
    .mp-card { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; }
    .mp-card .mp-avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: .8rem; }
    .mp-acts { grid-column: 2; flex-direction: row; justify-content: flex-start; gap: 1.25rem; }
}

/* MyPeople: records that may be one person saved twice, and the review that merges two records into one */
.mp-back { max-width: 860px; margin: 0 0 1rem; }
.mp-dups { max-width: 860px; margin: 0 0 1.25rem; padding: .9rem 1.1rem; border: 1px solid #D9CFCB; border-left: 4px solid #E19717; border-radius: 0 10px 10px 0; background: #fff; }
.mp-dups-title { margin: 0 0 .25rem; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1rem; color: #3C3C3B; }
.mp-dups-intro { max-width: 66ch; margin: 0 0 .5rem; font-size: .9rem; color: #4D5149; }
.mp-dups-list { margin: 0; padding: 0; list-style: none; }
.mp-dups-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 0; border-top: 1px solid #D9CFCB; }
.mp-dups-row:first-child { border-top: 0; }
.mp-dups-pair { flex: 1 1 20rem; font-size: .92rem; color: #3C3C3B; overflow-wrap: anywhere; }
.mp-dups-pair .mp-rel { font-size: .85rem; }
/* The review's heading takes focus only so it is read out when the review opens; it is not a control, so it draws no outline */
.mp-merge .pp-form-title:focus { outline: none; }
.mp-merge-intro { max-width: 66ch; margin: 0 0 1rem; color: #3C3C3B; }
.mp-merge-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 1.25rem; }
.mp-merge-rec { padding: 12px 14px; border: 1px solid #D9CFCB; border-radius: 10px; background: #fff; }
.mp-merge-subtitle { margin: 0 0 .6rem; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1rem; color: #3C3C3B; }
.mp-merge-field { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
.mp-merge-field legend { float: none; width: auto; margin: 0 0 .3rem; padding: 0; font-size: .92rem; font-weight: 600; color: #3C3C3B; }
.mp-merge-field .form-check { margin-bottom: .25rem; }
.mp-merge-field .form-check-label { color: #3C3C3B; overflow-wrap: anywhere; }
.mp-merge-same { margin: 0 0 1rem; font-size: .9rem; color: #4D5149; }
.mp-merge-kept { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .92rem; color: #3C3C3B; }
.mp-merge-kept li { margin-bottom: .2rem; overflow-wrap: anywhere; }
.mp-merge-choose .mp-merge-choose-error { margin: 0 0 .6rem; }
.mp-merge-choose label { display: block; }
.mp-merge-choose .mp-merge-select { max-width: 420px; margin: 0 0 .6rem; }
@media (max-width: 767.98px) {
    .mp-merge-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Beneficiary chooser (controls/BeneficiaryPicker.ascx over the person picker).
   Every kind of beneficiary is a row of one list, drawn as a person's row is:
   only the avatar (initials, or an icon for a group or a charity) and the one
   descriptor change. Where a field takes more than one kind, the add form starts
   with the kind, as one segmented control. Brand palette only.
   ============================================================================ */
.pp-avatar-icon { font-size: 1rem; }
.pp-avatar-icon i { line-height: 1; }

.pp-types { border: 0; margin: 0 0 1.1rem; padding: 0; min-width: 0; }
.pp-types-legend { float: none; width: auto; margin: 0 0 .45rem; padding: 0; font-size: .9rem; font-weight: 600; line-height: 1.4; color: #3C3C3B; }
.pp-types-options { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid #4D5149; border-radius: 8px; overflow: hidden; background: #fff; }
/* The radios stay in the page for the keyboard and screen readers; their labels are the segments */
.pp-type-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pp-type-label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin: 0; padding: .55rem 1.1rem; border-right: 1px solid #D9CFCB; background: #fff; color: #3C3C3B; font-size: .92rem; font-weight: 500; line-height: 1.3; cursor: pointer; }
.pp-types-options .pp-type-label:last-child { border-right: 0; }
.pp-type-label i { color: #006E7B; }
.pp-type-input:checked + .pp-type-label { background: #006E7B; color: #fff; }
.pp-type-input:checked + .pp-type-label i { color: #fff; }
/* The kind is a choice, never right or wrong: after a refused Add the form is "was-validated", and MDB's success green
   would repaint these labels (green on the chosen teal segment could not be read) */
.was-validated .pp-types .pp-type-input:valid ~ .pp-type-label { color: #3C3C3B; }
.was-validated .pp-types .pp-type-input:checked + .pp-type-label { color: #fff; }
/* A white ring and a dark one, so the focus shows on the teal segment and on the white ones alike */
.pp-type-input:focus-visible + .pp-type-label { outline: none; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #3C3C3B; }
@media (hover: hover) {
    .pp-type-input:not(:checked) + .pp-type-label:hover { background: rgba(0,138,160,.08); }
}
@media (max-width: 575.98px) {
    .pp-types-options { display: flex; flex-direction: column; width: 100%; }
    .pp-type-label { border-right: 0; border-bottom: 1px solid #D9CFCB; }
    .pp-types-options .pp-type-label:last-child { border-bottom: 0; }
}

/* Each kind's fields: the form panel names the kind shown (is-type-person, is-type-group, is-type-org) */
.pp-type-fields { display: none; }
.pp-form-panel.is-type-group .pp-type-group, .pp-form-panel.is-type-org .pp-type-org { display: block; }
.pp-form-panel.is-type-group .pp-form, .pp-form-panel.is-type-org .pp-form { display: none; }
.pp-field-help { margin: .3rem 0 0; font-size: .82rem; color: #4D5149; }
.pp-field textarea.pp-input { min-height: 88px; resize: vertical; }
/* The charity search keeps its own look, with the form's field edge */
.pp-type-org .charity-picker .form-control { border: 1px solid #4D5149; border-radius: 4px; min-height: 44px; }
.pp-type-org .charity-picker .cp-search:focus { border-color: #006E7B; box-shadow: 0 0 0 2px #006E7B; }

/* A list that only adds (a residue list shows every beneficiary itself): the MyPeople people it can add, then "Add a
   beneficiary"; with no one to offer, just "Add a beneficiary". Its button adds the person chosen, so it shows only then. */
.bp-addonly-empty .pp-fieldset { display: none; }
.bp-addonly-empty .pp-add { margin-top: 0; }
.bp-field:not(.bp-chosen) > .bp-add-chosen { display: none; }
.bp-field > .bp-add-chosen { margin-top: .75rem; }
.bp-addonly-intro { margin: 0 0 .5rem; font-weight: 600; color: #3C3C3B; }

/* A saved choice shown read-only (a saved gift's beneficiary): the chooser's row, without the radio */
.pp-row-static { border-color: #D9CFCB; }
.pp-row-static .pp-row-label { cursor: default; padding: 10px 14px; }
/* In a grid cell (a residue share row) the card is narrow: its descriptor goes under the name */
td .pp-row-static .pp-row-label { gap: 10px; padding: 8px 12px; }
td .pp-row-static .pp-main { flex-direction: column; align-items: flex-start; }
/* On a phone that cell left the card about 120px, and the name broke inside its words ("Jorda / n"). In a two-column
   share row (residue, dividing the estate) the card's column keeps 60% at a fixed layout, so the share box keeps the rest;
   the avatar gives its room to the name and the cells' padding is reduced, so a name breaks only between words. Not in a
   grid whose cells stack on a phone (.pw-grid-stack), where each cell takes the full width */
@media (max-width: 575.98px) {
    table:not(.pw-grid-stack):has(> tbody > tr > td:first-child:nth-last-child(2) .pp-row-static) { table-layout: fixed; }
    table:not(.pw-grid-stack) > tbody > tr > td:first-child:nth-last-child(2):has(.pp-row-static) { width: 60% !important; }
    td:has(.pp-row-static), td:has(.pp-row-static) + td { padding-left: .375rem; padding-right: .375rem; }
    td .pp-row-static .pp-avatar { display: none; }
    td .pp-row-static .pp-row-label { padding: 8px; }
    td .pp-row-static .pp-name { font-size: .95rem; overflow-wrap: break-word; }
}
.bp-card-none { margin: 0; font-size: .95rem; color: #4D5149; }

/* A page's own list of people (the children, grandchildren, other beneficiaries, and disinherit pages): each one a card in the
   picker's row anatomy with Edit and Remove, and the dashed "Add a child" row last. The form opens below the list, with the
   people already in MyPeople who could be added offered above it (controls/PersonPicker.ascx, Roster). */
.pp-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-roster-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; border: 2px solid #D9CFCB; border-radius: 10px; background: #fff; padding: 12px 16px; }
.pp-roster-item.is-editing { border-color: #008AA0; background: rgba(0,138,160,.05); }
.pp-roster-item .pp-row-label { grid-column: 1; grid-row: 1; padding: 0; width: auto; cursor: default; }
/* The line under the name (a date of birth, a reason) lines up with the name, past the 40px avatar and its 14px gap */
.pp-roster-item .pp-line { grid-column: 1; grid-row: 2; margin: -4px 0 0 54px; line-height: 1.55; }
.pp-roster-item .pp-actions { grid-column: 2; grid-row: 1; margin: 0; }
.pp-roster-add .pp-add-plus { margin-left: 0; }
.pp-roster-status { margin-top: .25rem; }
.pp-roster-form { margin-top: 12px; padding: 16px 18px 18px; border-left: 4px solid #E19717; border-radius: 0 10px 10px 0; background: linear-gradient(rgba(225,151,23,.08), rgba(225,151,23,.08)), #FFFFFF; }
.pp-roster-form .pp-add-to-will-title { margin: 0 0 .75rem; }
.pp-roster-form .pp { margin-bottom: 0; }
/* The panel is the frame: the form inside it drops its own box */
.pp-roster-form .pp-form-panel { border: 0; background: none; padding: 0; margin: 0; }
.pp-add-to-will-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
/* A page's own field after the person's (the disinherit page's reason) */
.pp-roster-form .pp-roster-reason { margin-top: 1.25rem; }
.pp-suggest { margin: 0 0 .25rem; }
.pp-suggest-title { font-family: "Montserrat", Helvetica, Arial, sans-serif; font-weight: 600; font-size: .95rem; line-height: 1.4; color: #4D5149; margin: 0 0 .6rem; }
.pp-suggest-title.pp-suggest-new { margin: 1.25rem 0 .75rem; }
.pp-suggest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-suggest-row { display: flex; align-items: center; gap: 1rem; border: 2px solid #D9CFCB; border-radius: 10px; background: #fff; padding: 8px 12px 8px 16px; }
.pp-suggest-row .pp-row-label { flex: 1; min-width: 0; width: auto; padding: 0; cursor: default; }
.pp-suggest-row .pp-suggest-add { flex: 0 0 auto; }
/* A suggestion that may be someone already on the list (saved twice): the note sits under the name, in line with it */
.pp-suggest-main { flex: 1; min-width: 0; }
.pp-suggest-dup { margin: .3rem 0 0 54px; font-size: .85rem; line-height: 1.45; color: #3C3C3B; overflow-wrap: anywhere; }
.pp-suggest-dup a { color: #006E7B; text-decoration: underline; white-space: nowrap; }
/* The people offered are for adding a person: a list of several kinds hides them while a group or a charity is chosen */
.pp-form-panel.is-type-group .pp-suggest, .pp-form-panel.is-type-org .pp-suggest { display: none; }
/* Groups and charities are not kept in MyPeople, so the reminder that people are is not shown for them */
.pp-form-panel.is-type-group ~ .pp-hint, .pp-form-panel.is-type-org ~ .pp-hint { display: none; }
/* Below 768px the picker's avatar is 34px with a 10px gap, so the lines under a name start 44px in */
@media (max-width: 767.98px) {
    .pp-roster-item .pp-line { margin-left: 44px; }
    .pp-suggest-dup { margin-left: 44px; }
}
@media (max-width: 575.98px) {
    .pp-roster-item { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
    .pp-roster-item .pp-actions { grid-column: 1; grid-row: auto; margin: .4rem 0 0 44px; }
    .pp-roster-form { padding: 14px 12px 16px; }
    /* The name takes the whole row, so it never breaks mid-word, and Add sits under it */
    .pp-suggest-row { flex-wrap: wrap; row-gap: .4rem; }
    .pp-suggest-row .pp-row-label { flex-basis: 100%; }
    .pp-suggest-row .pp-suggest-main { flex-basis: 100%; }
    .pp-suggest-row .pp-suggest-add { margin-left: 44px; }
}

/* Admin forms (Add Affiliate, Member Admin) and MyTeam. MDB's warning and info buttons put white text on amber
   and on light blue, short of the 4.5:1 contrast WCAG AA asks of button text, so there they take brand colours
   instead. Buttons on every other page keep their current look. */
.admin-accessible .btn-warning,
.mt-btn.btn-warning {
    --mdb-btn-color: #000;
    --mdb-btn-bg: #E19717;
    --mdb-btn-border-color: #E19717;
    --mdb-btn-hover-color: #000;
    --mdb-btn-hover-bg: #E19717;
    --mdb-btn-hover-border-color: #E19717;
    --mdb-btn-focus-color: #000;
    --mdb-btn-focus-bg: #E19717;
    --mdb-btn-active-color: #000;
    --mdb-btn-active-bg: #E19717;
    --mdb-btn-active-border-color: #E19717;
    --mdb-btn-disabled-color: #000;
    --mdb-btn-disabled-bg: #E19717;
    --mdb-btn-disabled-border-color: #E19717;
}
.admin-accessible .btn-info {
    --mdb-btn-color: #fff;
    --mdb-btn-bg: #3A5469;
    --mdb-btn-border-color: #3A5469;
    --mdb-btn-hover-color: #fff;
    --mdb-btn-hover-bg: #3A5469;
    --mdb-btn-hover-border-color: #3A5469;
    --mdb-btn-focus-color: #fff;
    --mdb-btn-focus-bg: #3A5469;
    --mdb-btn-active-color: #fff;
    --mdb-btn-active-bg: #3A5469;
    --mdb-btn-active-border-color: #3A5469;
    --mdb-btn-disabled-color: #fff;
    --mdb-btn-disabled-bg: #3A5469;
    --mdb-btn-disabled-border-color: #3A5469;
}

/* Member Admin's light-blue affiliate rows: the default bright-blue links fall short of 4.5:1 on that background. The
   rows are coloured by ItemStyle-BackColor, which renders as an inline style. */
.admin-accessible td[style*="#A6D7FE" i] a:not(.btn) {
    color: #3A5469;
    text-decoration: underline;
}

/* Admin forms: the labels in these table rows (row headings, check boxes, radio buttons) sit on striped rows, so
   drop the white backing Redesign.css gives every .form-outline label; floating labels keep it, because it is
   what hides the input border behind them. */
.admin-accessible td label:not(.form-label):not(.select-label) {
    background-color: transparent !important;
}

/* Add Affiliate: the table's caption, styled like the section-heading rows inside the table */
.admin-accessible caption.admin-tablecaption {
    padding: 1rem 1.4rem;
    background-color: #DDDDDD;
    color: var(--mdb-table-color);
    font-size: inherit;
    font-weight: bold;
    border: var(--mdb-border-width) solid var(--mdb-table-border-color);
    border-bottom: 0;
}

/* Code samples in the member area (White Label API, Member Admin, the privacy page, and others): MDB's pink is 4.3:1 on
   white, short of 4.5:1. #3A5469 is 7.9:1 on white and 5.2:1 on Member Admin's light-blue rows. */
code {
    color: #3A5469;
}

/* The "waiting" counts in the administrators' side nav and on their home page: red while items wait, green when none do.
   These are the red and green the admin area already uses for counts that need action (.bk-count--action) and for
   "ready" (.bk-badge--green), about 6:1 on the side nav's light grey; the pure red and #4caf50 of .red-text and
   .green-text, which these replace, fall short of 4.5:1 there. !important for the same reason those had it (the side
   nav's link colours). They stay at normal weight: the side nav clips any line it cannot fit, and bold would push
   more of the longer French counts past its edge. */
.pw-count-waiting {
    color: #B02A37 !important;
}
.pw-count-clear {
    color: #146C43 !important;
}
/* In the side nav, a count's text lines up under its link's text rather than 20 px further in, which gives the longer
   ones (the French counts and the documents breakdown) room: MDB's .sidenav-link is one fixed-height line that clips
   whatever does not fit. The count's ms-5 margin gives way to padding equal to the link's own (1.5rem) plus its icon's
   width and margin (Site.css), so the two stay lined up at any font size. */
.sidenav .sidenav-link.pw-count-waiting,
.sidenav .sidenav-link.pw-count-clear {
    margin-left: 0 !important;
    padding-left: calc(1.5rem + 12.48px + 15px);
}

/* Add Affiliate on phones and small tablets: the two-column form table cannot shrink below its widest field (636 px),
   and the page container is narrower than that up to 767 px, so below 768 px each label sits above its field, the text
   boxes and fixed-width lists may shrink, and long example addresses wrap. */
@media (max-width: 767.98px) {
    .admin-formtable,
    .admin-formtable > caption,
    .admin-formtable > tbody,
    .admin-formtable > tbody > tr,
    .admin-formtable > tbody > tr > td,
    .admin-formtable > tbody > tr > th {
        display: block;
        width: 100%;
    }
    .admin-formtable > tbody > tr > td,
    .admin-formtable > tbody > tr > th {
        padding: 0.5rem 0.75rem;
        overflow-wrap: anywhere;
    }
    .admin-formtable .required-input-group .form-control,
    .admin-formtable .required-input-group > .PWfixed-width-sm,
    .admin-formtable .required-input-group > .PWfixed-width-md {
        min-width: 0;
    }
    .admin-formtable .PWfixed-width-sm,
    .admin-formtable .PWfixed-width-md {
        width: auto;
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/* .active in the side nav: Site.css colours it #1266f1, which is 4.45:1 on its faint blue; teal is 5.3:1. Same
   selectors as that rule, later in the cascade. MDB also puts .active on any side-nav link that is clicked (and on its
   section heading and its ripple), so the current-page look below keys on aria-current instead. */
.sidenav-primary .sidenav-item .active,
.sidenav-primary .sidenav-link .active {
    color: #006E7B;
}

/* The side nav's current page: the member masters' script marks its link aria-current="page", as do the Services menus
   some pages carry in the side nav. A teal tint with a teal bar on its left edge, so it does not look like the
   always-teal featured link (.sidenav-featured); teal on the tint is 5.3:1. As specific as MDB's hover rule and later,
   so hovering keeps it. */
.sidenav-primary .sidenav-item .sidenav-link[aria-current="page"],
.sidenav-primary .sidenav-item .dropdown-item[aria-current="page"] {
    color: #006E7B;
    background-color: #EAF4F5;
    box-shadow: inset 4px 0 0 #006E7B;
    font-weight: 600;
}

/* Links in data tables on member and admin pages: Site.css makes every one #007bff (table.table a), which is 4.0:1 on
   white and 3.7:1 on a light button, and also overrides the text colour of buttons that are links. Plain links take the
   site's own link colour, and button links get their button's text colour back. :where() keeps these at the
   specificity of the Site.css rule, so styled links such as .pw-table a.pw-link-btn--primary, and MDB's hover and focus
   colours, still win. The Receipt links' border (Site.css .border-bluebtn a) follows the new text colour. */
table.table a:where(:not(.btn)) {
    color: var(--primarybrand-2);
}
table.table a:where(.btn) {
    color: var(--mdb-btn-color);
}
table.table .border-bluebtn a {
    border-color: var(--primarybrand-2) !important;
}

/* GridView page numbers on member and admin pages: the pager renders each one as a bare link of about 8 x 15 px, so
   each becomes a target of at least 24 x 24 px (WCAG 2.5.8). */
table a[href*="'Page$"] {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    line-height: 24px;
    text-align: center;
}

/* Keyboard focus on links in the side nav and in member page content: Redesign.css sets outline: none on
   .members-page-content a and .sidenav a, which also removes the a:focus-visible ring (same specificity, later). These give
   it back, inside the box for side nav links so the side nav's scroll area does not clip it. */
.members-page-content a:focus-visible {
    outline: 2px solid var(--accentaccent-8);
    outline-offset: 2px;
}
.sidenav a:focus-visible {
    outline: 2px solid var(--accentaccent-8);
    outline-offset: -2px;
}

/* The labels on the member dashboards' link cards ("Click", "Print", "Sign", "Quick Links": .linksection .header in
   Site.css, on MyWill, MyPowerOfAttorney, MyLivingWill, MyFuneral, MyLifeLocker, and MyExpatWill) were white on #65a7dd,
   2.6:1. Black on that blue measures 8.1:1 but is hard to read (the WCAG formula overrates dark text on mid-tone
   backgrounds), so the label keeps its white text on the brand slate blue instead, 7.9:1. */
.linksection .header {
    background-color: #3A5469;
}

/* Keyboard focus on buttons in the member and admin area, wizard pages included. MDB's .btn:focus-visible sets
   outline: 0, and Site.css's input { outline: 0 !important } also catches the input buttons ASP.NET renders, so a keyboard
   user could not see which button had focus. This is the links' ring from above. Scoped to main, which holds the page
   content on all four member masters but not the side nav; the wizard masters drop .members-page-content, so that class
   would miss them. The first rule ties MDB's own (0,2,0) and wins by loading later, so a page's own button focus rule,
   which is more specific, still wins. Input buttons need !important, and no page's own ring ever showed on them. */
:where(main) .btn:focus-visible {
    outline: 2px solid var(--accentaccent-8);
    outline-offset: 2px;
}
:where(main) input.btn:focus-visible {
    outline: 2px solid var(--accentaccent-8) !important;
}

/* FillScreen(), called by the wide admin pages, Review Legal Documents, and White Label API admin, swaps the master's
   .container for .PWbigscreen, which has no side padding, so the .row inside kept Bootstrap's -12px side margins and
   stood 12px past the window: a sideways scroll at every width. */
.PWbigscreen > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Shipping console. Its red outline buttons (Cancel shipment, Send again, Void label, and Delete source order) were MDB's
   #DC4C64 on white, 3.99:1, so they take the admin area's action red, as .si-admin does. The batch bar wraps
   rather than pushing the page sideways on a phone. */
.pwship-detail .btn-outline-danger {
    color: #B02A37;
    border-color: #B02A37;
}
.pwship-detail .btn-outline-danger:hover,
.pwship-detail .btn-outline-danger:focus {
    color: #FFFFFF;
    background-color: #B02A37;
    border-color: #B02A37;
}
.pwship-batchbar {
    flex-wrap: wrap;
}

/* Affiliate Applications. Under each undecided applicant's name, what their email address already tells us; in the review
   panel, each account they already have, with its reference codes and a year-by-month grid of each code's revenue. The
   grids have 15 columns, so on a phone they scroll sideways inside .table-responsive rather than squeeze. */
.pw-known {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .3rem;
}
.pw-acctlist {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #D9CFCB;
}
.pw-acct {
    margin-top: 1.25rem;
    padding-left: 1rem;
    border-left: 4px solid #D9CFCB;
}
/* Found by name alone: amber, beside a pill saying so, until somebody confirms it is the applicant */
.pw-acct--possible {
    border-left-color: #E19717;
}
.pw-acct__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin-bottom: .4rem;
}
.pw-acct__name {
    font-size: 1rem;
    font-weight: 700;
    color: #3C3C3B;
    margin: 0;
}
.pw-acct__id {
    margin-bottom: .2rem;
}
/* Outranks .members-page-content a (no underline): this link sits in a line of text, so colour alone must not mark it */
.pw-acct .pw-acct__admin {
    margin-left: .75rem;
    color: #006E7B;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.pw-acct__meta {
    font-size: .875rem;
    color: #4D5149;
    margin-bottom: .85rem;
}
.pw-acct__total {
    margin: .25rem 0 .75rem;
}
/* Bootstrap's .visually-hidden text is absolutely positioned, so without this it escapes these sideways-scrolling tables
   and widens the whole page on a phone */
.pw-acct .table-responsive {
    position: relative;
}
/* A table's title, above its scrolling box (named to the table with aria-labelledby) */
.pw-acct__title {
    margin: .9rem 0 .35rem;
    font-size: .875rem;
    font-weight: 600;
    color: #3C3C3B;
}
.pw-acct__sub {
    display: block;
    font-size: .78rem;
    color: #4D5149;
}
.pw-revgrid {
    font-size: .8rem;
}
.pw-revgrid th,
.pw-revgrid td {
    text-align: right;
    white-space: nowrap;
}
/* Narrower than .pw-table's own side padding, so all 15 columns fit a 1024 px screen */
.pw-revgrid thead th,
.pw-revgrid tbody td {
    padding-left: .4rem;
    padding-right: .4rem;
}
.pw-revgrid .pw-revgrid__yr {
    text-align: left;
}
.pw-revgrid tbody th {
    padding: .45rem .4rem;
    border-top: 1px solid rgba(217, 207, 203, .6);
    font-weight: 600;
    color: #3C3C3B;
}
.pw-revgrid .pw-revgrid__none {
    color: #4D5149;
}
/* The year stays at the left and its total and order count at the right; only the months scroll on a narrow screen.
   The order count has a fixed width so the total can sit exactly that far from the right edge. */
.pw-revgrid .pw-revgrid__yr,
.pw-revgrid .pw-revgrid__tot,
.pw-revgrid .pw-revgrid__cnt {
    position: sticky;
    z-index: 1;
    background-color: #FFFFFF;
}
.pw-revgrid .pw-revgrid__yr {
    left: 0;
    box-shadow: inset -1px 0 0 #D9CFCB;
}
.pw-revgrid .pw-revgrid__tot {
    right: 4.5rem;
    box-shadow: inset 1px 0 0 #D9CFCB;
    font-weight: 700;
    color: #3C3C3B;
}
.pw-revgrid .pw-revgrid__cnt {
    right: 0;
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
}
/* The row hover tint of .pw-table, on the pinned cells' own background */
.pw-revgrid tbody tr:hover > .pw-revgrid__yr,
.pw-revgrid tbody tr:hover > .pw-revgrid__tot,
.pw-revgrid tbody tr:hover > .pw-revgrid__cnt {
    background-color: #F4FAFB;
}
/* The application's own details: a long email address or web address wraps instead of widening the page on a phone */
.pw-detailtable td + td {
    overflow-wrap: anywhere;
}
/* The Approve dialog's subject and message are switched off until an account is chosen to write the message for. The
   .form-control rule in Redesign.css keeps every box white, even a disabled one, so they are greyed out here. */
#approveModal .form-control:disabled {
    background-color: rgba(217, 207, 203, .6) !important;
    color: #4D5149 !important;
    cursor: not-allowed;
}
/* ==========================================================================================
   AnswerCheck (controls/AnswerCheck.ascx and controls/AnswerCheckFix.ascx), the Tiles design Henry chose on 16 October 2026:
   a tinted panel at the top of Review Your Choices, a status chip in its heading, and each finding on its own white tile.
   The tints are the brand colours at low opacity; every text colour is a brand colour with AA contrast on its background.
   ========================================================================================== */
.ac-zone {
    margin: 4px 0 18px;
    color: #3C3C3B;
}
.ac-tiles,
.ac-cx {
    background-color: rgba(0, 138, 160, .08);
    border-radius: 16px;
    padding: 14px;
}
.ac-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 2px 4px 10px;
}
.ac-mark {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #006E7B;
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-size: 15px;
}
/* The heading keeps at least 10em beside its mark; on a phone the chip drops below them rather than squeezing it */
.ac-title {
    flex: 1 1 10em;
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: #3A5469;
}
.ac-title:focus,
.ac-off-txt:focus {
    outline: none;
}
.ac-chip {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 10px;
    background-color: #FFFFFF;
    color: #006E7B;
    border: 1px solid rgba(0, 138, 160, .45);
}
.ac-spin {
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: ac-spin 1s linear infinite;
}
@keyframes ac-spin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ac-spin {
        animation: none;
        border-color: #FFFFFF;
    }
}

/* The agreement card and the "off" note */
.ac-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 14px 16px;
}
.ac-txt {
    margin: 0 0 10px;
    max-width: 66ch;
    font-size: 14.5px;
    line-height: 1.55;
}
.ac-keep-h {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 600;
}
.ac-points {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 14.5px;
    line-height: 1.55;
}
.ac-points li {
    margin: 6px 0;
    max-width: 70ch;
    line-height: 1.55;
    list-style: disc;
}
.ac-points b,
.ac-agree-row b {
    font-weight: 600;
}
.ac-agree {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 110, 123, .25);
    border-radius: 8px;
    background-color: rgba(0, 138, 160, .08);
    max-width: 70ch;
}
.ac-agree.is-err {
    border: 2px solid #E19717;
    background-color: rgba(225, 151, 23, .12);
    padding: 9px 11px;
}
.ac-agree-row {
    font-size: 14.5px;
    line-height: 1.5;
}
.ac-agree-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 1px 10px 0 0;
    vertical-align: top;
    accent-color: #006E7B;
    cursor: pointer;
}
.ac-agree-row label {
    display: inline;
    cursor: pointer;
}
.ac-agree-note {
    margin: 4px 0 0 30px;
    font-size: 13px;
    color: #4D5149;
}
.ac-ps {
    color: #006E7B;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.ac-ps i {
    font-size: 11px;
    margin-left: 4px;
}
/* MyProfile's steps pad every link in them (ul.stepper li a); this link sits in its sentence */
ul.stepper li a.ac-ps {
    padding: 0;
}
.ac-err {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0 30px;
    font-size: 13.5px;
    font-weight: 600;
}
.ac-err i {
    margin-top: 3px;
    color: #3A5469;
}
.ac-off {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 9px 14px;
    border: 1.5px dashed rgba(77, 81, 73, .45);
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 14px;
    color: #4D5149;
}
.ac-off-txt {
    flex-basis: 100%;
    margin: 0;
}
.ac-off-txt b {
    color: #3A5469;
    font-weight: 600;
}
.ac-off .ac-agree {
    flex-basis: 100%;
    margin: 2px 0;
    max-width: none;
}

/* Buttons and links */
.ac-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}
.ac-btn,
.ac-fix {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #FFFFFF;
    background-color: #006E7B;
    border: 2px solid #006E7B;
    border-radius: 999px;
    padding: 6px 18px;
    text-decoration: none;
    cursor: pointer;
}
.ac-btn:hover,
.ac-btn:focus,
.ac-fix:hover,
.ac-fix:focus {
    color: #FFFFFF;
    background-color: #3A5469;
    border-color: #3A5469;
    text-decoration: none;
}
.ac-eq {
    gap: 10px 12px;
}
.ac-eq .ac-btn {
    flex: 1 1 12.5em;
    max-width: 17em;
    text-align: center;
}
.ac-btn-sm,
.ac-fix {
    font-size: 13.5px;
    padding: 4px 16px;
}
.ac-text {
    font-size: 13.5px;
    color: #006E7B;
    background: none;
    border: 0;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.ac-text:hover,
.ac-text:focus {
    color: #3A5469;
}
.ac-zone .ac-btn:focus-visible,
.ac-zone .ac-fix:focus-visible,
.ac-zone .ac-text:focus-visible,
.ac-zone .ac-ps:focus-visible,
.ac-zone summary:focus-visible,
.ac-zone input[type="checkbox"]:focus-visible,
.ac-cx .ac-btn:focus-visible,
.ac-cx .ac-text:focus-visible {
    outline: 3px solid #008AA0;
    outline-offset: 2px;
}
/* The card's buttons are asp:Buttons and its "I agree" boxes are check boxes, all input elements, and Site.css's
   input { outline: none !important } hid the ring above on them: the buttons showed keyboard focus only by changing colour,
   and the boxes not at all */
.ac-zone input.ac-btn:focus-visible,
.ac-zone input[type="checkbox"]:focus-visible {
    outline: 3px solid #008AA0 !important;
}

/* "Learn how" and "How it works" open in place */
.ac-details summary {
    display: inline;
    color: #006E7B;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
}
.ac-details summary::-webkit-details-marker {
    display: none;
}
.ac-details[open] summary {
    color: #3A5469;
}
.ac-how {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13.5px;
}
.ac-how li {
    margin: 4px 0;
    max-width: 72ch;
    line-height: 1.5;
    list-style: disc;
}
.ac-details-off,
.ac-details-how[open] {
    flex-basis: 100%;
}
.ac-how-box {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 10px 14px 12px;
    margin-top: 8px;
}
.ac-how-box .ac-how {
    margin-top: 0;
}

/* Optional suggestions, after the others, open in place */
.ac-more {
    margin-top: 8px;
}
.ac-more[open] > summary {
    display: inline-block;
    margin-bottom: 8px;
}

/* The results */
.ac-remind {
    margin: 0 0 8px;
    padding: 8px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    background-color: rgba(225, 151, 23, .12);
    border: 1px solid rgba(225, 151, 23, .4);
    border-radius: 10px;
}
.ac-slow {
    margin: 0 0 8px;
    padding: 0 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4D5149;
}
.ac-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.ac-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 110, 123, .18);
    border-radius: 12px;
    padding: 12px 14px;
}
.ac-ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(225, 151, 23, .14);
    color: #3A5469;
    display: grid;
    place-items: center;
    font-size: 15px;
}
.ac-body {
    flex: 1;
    min-width: 0;
}
.ac-say {
    margin: 0 0 8px;
    font-size: 14.5px;
    line-height: 1.5;
}
.ac-tile.is-kept {
    background-color: transparent;
    border-style: dashed;
}
.ac-tile.is-kept .ac-ic {
    background-color: #FFFFFF;
    color: #4D5149;
    border: 1px solid #D9CFCB;
}
.ac-tile.is-kept .ac-say {
    color: #4D5149;
}
.ac-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 10px 4px 0;
    font-size: 13px;
    color: #4D5149;
}

/* The box on the page that fixes a finding, and the field to change */
.ac-cx {
    margin: 0 0 18px;
    padding: 14px 18px 12px;
    color: #3C3C3B;
}
.ac-cx-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #3A5469;
}
.ac-cx-say {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    max-width: 64ch;
}
.ac-cx-steps {
    margin: 0 0 10px;
    padding-left: 22px;
    font-size: 14.5px;
}
.ac-cx-steps li {
    margin: 3px 0;
    max-width: 64ch;
    line-height: 1.5;
    list-style: decimal;
}
.ac-cx-why {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4D5149;
    max-width: 66ch;
}
.ac-cx-why b {
    color: #3C3C3B;
    font-weight: 600;
}
.ac-cx-meant {
    font-size: 13.5px;
    color: #4D5149;
}
.ac-target {
    outline: 2px solid #E19717;
    outline-offset: 4px;
    border-radius: 6px;
}
/* On a phone the way back to Review takes the box's full width, so its label stays on one line */
@media (max-width: 575.98px) {
    .ac-cx .ac-acts .ac-btn {
        flex: 1 1 100%;
        text-align: center;
    }
}
/* Review Your Choices for a Power of Attorney or a Living Will: a long word in an answer wraps instead of pushing its table
   past the page on a phone. The labels are left to break between words (hyphenated where a word is too long), because
   breaking anywhere let the label column shrink until "Jurisdiction" split mid-word. A section's Edit button keeps to the
   right of its bar when a long title pushes it onto a second line */
.pw-review-summary .table td {
    overflow-wrap: anywhere;
}
.pw-review-summary .table th {
    hyphens: auto;
}
.pw-review-summary .accordion-header > .btn {
    margin-left: auto;
}
/* On a phone the cells keep less padding, so the answers' column stays wide enough for its longest word: breaking a word
   anywhere is left to the long strings it is there for, such as an email address */
@media (max-width: 575.98px) {
    .pw-review-summary .table th,
    .pw-review-summary .table td {
        padding: .5rem .75rem;
    }
}

/* ==========================================================================================
   Review Your Choices for a Will or an Expatriate Will (members/ and fr/members/ mywill_review and myexpatwill_review)
   ========================================================================================== */
/* Each section's heading holds a button that opens and closes the section, with the look of the bar it replaced: the badge
   and the chevron keep the size of the body text they sat in */
.review-section-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: start;
    cursor: pointer;
}
.review-section-toggle:focus-visible {
    outline: 3px solid #006E7B;
    outline-offset: 2px;
    border-radius: 4px;
}
.review-section-toggle .badge {
    font-family: var(--body-16-font-family);
    font-size: calc(var(--body-16-font-size) * .75);
    letter-spacing: var(--body-16-letter-spacing);
}
.review-section-toggle .review-chevron {
    font-size: var(--body-16-font-size);
}
/* The section's Edit button stays hidden while the section is closed */
.accordion-header > .review-section-heading:has(> .collapsed) + .btn {
    visibility: hidden;
}
/* An answer still to give: dark text for contrast, with the amber kept for its icon */
.review-missing,
.table td.review-missing {
    color: #3C3C3B;
}
.review-missing .fa-exclamation-triangle {
    color: #E19717;
}
/* "Skipped": white on brand grey, for contrast */
.review-badge-neutral {
    background-color: #4D5149;
    color: #FFFFFF;
}
/* A distribution plan's question not answered yet (ShowUnanswered): the amber callouts' border on white, with .review-missing's
   dark text and amber icon; its links in brand teal (5.9:1) and underlined, so they are not shown by colour alone */
.review-unanswered {
    background-color: #FFFFFF;
    border: 1px solid #E19717;
}
.review-unanswered a {
    color: #006E7B;
    text-decoration: underline;
}

/* AnswerCheck: each finding's kind in words before its sentence (AnswerCheckFunctions.KindLabelHtml), so it is never shown by
   colour alone. Solid brand colours only, so each label looks the same on a white tile, a kept tile, and the fix page's box:
   "Must fix" is white on slate (7.9:1); the others are text on white inside a border of the kind's colour, charcoal in amber
   (11:1), teal in teal (5.9:1), and grey in taupe (8.1:1). The transparent border keeps "Must fix" as tall as the others */
.ac-kind {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
    white-space: nowrap;
}
.ac-kind.is-stop {
    background-color: #3A5469;
    color: #FFFFFF;
}
.ac-kind.is-check {
    background-color: #FFFFFF;
    border-color: #E19717;
    color: #3C3C3B;
}
.ac-kind.is-rec {
    background-color: #FFFFFF;
    border-color: #006E7B;
    color: #006E7B;
}
.ac-kind.is-opt {
    background-color: #FFFFFF;
    border-color: #D9CFCB;
    color: #4D5149;
}
/* The heading's mark when something was found: how many, on a neutral circle (the tick is kept for when nothing was) */
.ac-mark:has(> .ac-count) {
    background-color: #FFFFFF;
    color: #3A5469;
    border: 2px solid #3A5469;
    font-size: 14px;
    font-weight: 700;
}
.ac-count {
    line-height: 1;
}
/* A fix page's "Save and return to Review" again beside NEXT at the bottom (pwAnswerCheckReturnBottom in
   Scripts/MembersFunctions.js): the Back, Save, and Next group keeps its look, and the two stay centred together */
#navBackSaveNext.ac-has-return {
    justify-content: center;
    align-items: center;
    column-gap: 16px;
}
#navBackSaveNext.ac-has-return > .btn_group {
    margin-left: 0;
    margin-right: 0;
}
#navBackSaveNext > .ac-return-bottom {
    margin-top: 15px;
}
#navBackSaveNext > .ac-return-bottom:focus-visible {
    outline: 3px solid #008AA0;
    outline-offset: 2px;
}
/* While the page saves after "Save and return to Review", both of its buttons are switched off */
#acReturnTop:disabled,
#acReturnBottom:disabled {
    opacity: .65;
    cursor: default;
}
@media (min-width: 576px) {
    #navBackSaveNext > .ac-return-bottom {
        margin-top: 0;
    }
}

/* ======================================================================================================
   Website Options (admin/siteoptions). Each scope is one ledger of sections; a closed section is a single
   row whose second line reads out what is live now, so the closed page works as a status board. A Save bar
   stays at the bottom of the screen and names the sections with unsaved changes. Scoped to #soRoot.
   Brand colours only: teal for anything you can act on, amber for anything that needs attention.
   ====================================================================================================== */
#soRoot {
    --so-ink: #3C3C3B;
    --so-slate: #4D5149;
    --so-teal: #006E7B;
    --so-stone: #D9CFCB;
    --so-amber: #E19717;
    max-width: 1100px;
    color: var(--so-ink);
}
#soRoot .so-lede {
    max-width: 70ch;
    margin-bottom: 1.5rem;
    color: var(--so-slate);
}
#soRoot .so-num {
    font-variant-numeric: tabular-nums;
}

/* Find box, and Open all / Close all */
#soRoot .so-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 1.5rem;
    margin-bottom: .25rem;
}
#soRoot .so-find {
    flex: 1 1 18rem;
    max-width: 30rem;
}
#soRoot .so-tools-actions {
    display: flex;
    gap: 1.25rem;
    padding-bottom: .5rem;
}
#soRoot .so-linkbtn {
    padding: .25rem 0;
    border: 0;
    background: none;
    color: var(--so-teal);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}
#soRoot .so-linkbtn:hover {
    text-decoration-thickness: 2px;
}
#soRoot .so-linkbtn:focus-visible {
    outline: 3px solid var(--so-teal);
    outline-offset: 2px;
}
#soRoot .so-find-status {
    flex-basis: 100%;
    min-height: 1.2em;
    margin: 0;
    font-size: .8125rem;
    color: var(--so-slate);
}

/* Scope groups and their ledgers */
#soRoot .so-group {
    margin: 2rem 0 .6rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--so-slate);
}
#soRoot .so-ledger {
    border: 1px solid var(--so-stone);
    border-radius: .5rem;
    background-color: #FFFFFF;
}
#soRoot .so-section {
    position: relative;
}
#soRoot .so-section:not([hidden]) ~ .so-section:not([hidden]) {
    border-top: 1px solid var(--so-stone);
}
/* The left edge says what state a section is in: teal while open, amber when changed or needing a fix */
#soRoot .so-section::before,
#soRoot .so-sub::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 4px;
    background-color: transparent;
}
#soRoot .so-sub::before {
    width: 3px;
}
#soRoot .so-section.is-open::before,
#soRoot .so-sub.is-open::before {
    background-color: var(--so-teal);
}
#soRoot .so-section.is-changed::before,
#soRoot .so-section.has-problem::before,
#soRoot .so-sub.is-changed::before,
#soRoot .so-sub.has-problem::before {
    background-color: var(--so-amber);
}

/* Section and item rows: a button inside a heading (the WAI-ARIA accordion pattern) */
#soRoot .so-section-heading,
#soRoot .so-sub-heading {
    margin: 0;
    font: inherit;
    letter-spacing: normal;
}
#soRoot .so-toggle,
#soRoot .so-subtoggle {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    column-gap: .85rem;
    row-gap: .15rem;
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 1rem 1.25rem;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
#soRoot .so-subtoggle {
    padding: .75rem 1rem;
    border-radius: .4rem;
}
#soRoot .so-toggle::before,
#soRoot .so-subtoggle::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: .5rem;
    height: .5rem;
    margin: .45rem 0 0 .1rem;
    border-right: 2px solid var(--so-teal);
    border-bottom: 2px solid var(--so-teal);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
#soRoot .is-open > .so-section-heading > .so-toggle::before,
#soRoot .is-open > .so-sub-heading > .so-subtoggle::before {
    transform: rotate(45deg);
}
#soRoot .so-title {
    grid-column: 2;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--so-ink);
}
#soRoot .so-subtoggle .so-title {
    font-size: 1rem;
}
#soRoot .so-summary {
    grid-column: 2;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--so-slate);
    overflow-wrap: anywhere;
}
#soRoot .so-summary:empty {
    display: none;
}
/* While a section or item has unsaved changes, its readout still describes what the websites use, so it says so */
#soRoot .so-section.is-changed > .so-section-heading .so-summary::before,
#soRoot .so-sub.is-changed > .so-sub-heading .so-summary::before {
    content: "Live now: ";
    font-weight: 600;
    color: var(--so-ink);
}
#soRoot .so-chips {
    display: flex;
    flex-wrap: wrap;
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-content: flex-end;
    gap: .35rem;
    max-width: 15rem;
}
#soRoot .so-chips:empty {
    display: none;
}
#soRoot .so-toggle:hover .so-title,
#soRoot .so-subtoggle:hover .so-title {
    color: var(--so-teal);
    text-decoration: underline;
    text-underline-offset: .2em;
}
#soRoot .so-toggle:focus-visible,
#soRoot .so-subtoggle:focus-visible {
    outline: 3px solid var(--so-teal);
    outline-offset: -3px;
}

/* State chips. On: white on teal 5.9:1. Off: ink on stone 7.2:1. Attention: black on amber 7.7:1. */
#soRoot .so-chip {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 50rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
#soRoot .so-chip--on {
    background-color: var(--so-teal);
    color: #FFFFFF;
}
#soRoot .so-chip--off {
    background-color: var(--so-stone);
    color: var(--so-ink);
}
#soRoot .so-chip--warn,
#soRoot .so-chip--problem {
    background-color: var(--so-amber);
    color: #000000;
}
#soRoot .so-chip--changed {
    background-color: #FFFFFF;
    color: #000000;
    box-shadow: inset 0 0 0 2px var(--so-amber);
}

/* Open sections. Closed ones are hidden only once the page script has marked the page so-ready. */
#soRoot .so-panel {
    padding: .25rem 1.25rem 1.5rem 3.35rem;
}
#soRoot .so-subpanel {
    padding: .25rem 1rem 1.25rem 2.85rem;
}
#soRoot.so-ready .so-section:not(.is-open) > .so-panel,
#soRoot.so-ready .so-sub:not(.is-open) > .so-subpanel {
    display: none;
}
#soRoot .so-intro {
    max-width: 75ch;
    margin-bottom: 1rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--so-slate);
}
#soRoot .so-subs {
    border: 1px solid var(--so-stone);
    border-radius: .4rem;
}
#soRoot .so-sub {
    position: relative;
}
#soRoot .so-sub + .so-sub {
    border-top: 1px solid var(--so-stone);
}
#soRoot .so-fieldset {
    min-width: 0;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}
#soRoot .so-fieldset > legend {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 .75rem;
    padding: 0 0 .35rem;
    border-bottom: 1px solid var(--so-stone);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--so-ink);
}
#soRoot .so-panel .row,
#soRoot .so-subpanel .row {
    margin-bottom: 1rem;
}
#soRoot .so-field {
    margin-bottom: 1rem;
}
#soRoot .row > .so-field {
    margin-bottom: 0;
}
#soRoot .so-form .form-label {
    margin-bottom: .3rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--so-ink);
}
#soRoot .so-form .form-text,
#soRoot .so-formtext-block {
    display: block;
    max-width: 75ch;
    margin-top: .3rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--so-slate);
}
/* A visible box edge (slate on white, 8:1) rather than the theme's pale grey, which is under 3:1 */
#soRoot .so-form .form-control,
#soRoot .so-form .form-select {
    border: 1px solid var(--so-slate);
    border-radius: .375rem;
    background-color: #FFFFFF;
    color: var(--so-ink);
    font-size: .95rem;
}
#soRoot .so-form .form-control:focus,
#soRoot .so-form .form-select:focus {
    border-color: var(--so-teal);
    box-shadow: 0 0 0 3px rgba(0, 110, 123, .3);
    outline: 0;
}
#soRoot .so-form .form-control::placeholder {
    color: var(--so-slate);
    opacity: 1;
}
#soRoot .so-switch {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-height: 1.5rem;
    margin: 0 0 .85rem;
    padding-left: 0;
}
#soRoot .so-switch .form-check-input {
    float: none;
    flex-shrink: 0;
    margin: .2rem 0 0;
}
#soRoot .so-switch .form-check-label {
    padding-left: 0;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--so-ink);
    cursor: pointer;
}
/* The theme's switch in brand teal. Off, the track and thumb carry a slate outline, so the switch still
   stands out from the page at better than 3:1 when it is not on. */
#soRoot .so-switch .form-check-input {
    background-color: var(--so-stone);
    box-shadow: inset 0 0 0 1px var(--so-slate);
}
#soRoot .so-switch .form-check-input::after {
    box-shadow: 0 0 0 1px var(--so-slate);
}
#soRoot .so-switch .form-check-input:checked {
    border-color: var(--so-teal);
    background-color: rgba(0, 110, 123, .45);
    box-shadow: inset 0 0 0 1px var(--so-teal);
}
#soRoot .so-switch .form-check-input:checked[type=checkbox]::after {
    background-color: var(--so-teal);
    box-shadow: none;
}
#soRoot .so-switch .form-check-input:focus::before,
#soRoot .so-switch .form-check-input:checked:focus::before {
    box-shadow: 3px -1px 0 13px rgba(0, 110, 123, .25);
}
#soRoot .so-switch .form-check-input:focus-visible {
    outline: 3px solid var(--so-teal);
    outline-offset: 5px;
}
#soRoot textarea.form-control {
    resize: vertical;
}
/* A setting the find box matched */
#soRoot .is-match > .form-label,
#soRoot .so-switch.is-match > .form-check-label,
#soRoot .so-figure-row.is-match .so-figure-name {
    border-radius: .2rem;
    background-color: rgba(225, 151, 23, .28);
    box-shadow: 0 0 0 .2rem rgba(225, 151, 23, .28);
}
#soRoot .so-help {
    max-width: 80ch;
    margin: 0 0 1rem;
    padding: .25rem 0 .25rem .9rem;
    border-left: 3px solid var(--so-stone);
}
#soRoot .so-help > summary {
    font-size: .875rem;
    font-weight: 600;
    color: var(--so-teal);
    cursor: pointer;
}
#soRoot .so-help > summary:focus-visible {
    outline: 3px solid var(--so-teal);
    outline-offset: 2px;
}
#soRoot .so-help[open] > summary {
    margin-bottom: .5rem;
}
#soRoot .so-help p {
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--so-slate);
}

/* Review figures: one row per listing or brand */
#soRoot .so-figure-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem 7.5rem;
    gap: .75rem;
    align-items: end;
    padding: .6rem 0;
    border-bottom: 1px solid var(--so-stone);
}
#soRoot .so-figure-row:last-child {
    border-bottom: 0;
}
#soRoot .so-figure-row > .so-field {
    margin-bottom: 0;
}
#soRoot .so-figure-name {
    align-self: center;
    margin: 0;
    font-size: .9375rem;
}
#soRoot .so-figure-name span {
    display: block;
    font-size: .8125rem;
    color: var(--so-slate);
}
#soRoot .so-figure-name a {
    color: var(--so-teal);
}

/* Messages at the top: saved, saved with exceptions, or refused */
#soRoot .so-alert {
    max-width: 80ch;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--so-stone);
    border-left: 6px solid var(--so-teal);
    border-radius: .5rem;
    background-color: #FFFFFF;
}
#soRoot .so-alert--warn,
#soRoot .so-alert--problem {
    border-left-color: var(--so-amber);
}
#soRoot .so-alert:focus:not(:focus-visible) {
    outline: 0;
}
#soRoot .so-alert-title {
    margin-bottom: .4rem;
    font-weight: 600;
}
#soRoot .so-alert p:last-child,
#soRoot .so-alert ul:last-child {
    margin-bottom: 0;
}
#soRoot .so-alert ul {
    padding-left: 1.2rem;
}
#soRoot .so-alert li {
    margin-bottom: .3rem;
}
#soRoot .so-alert a {
    color: var(--so-teal);
    font-weight: 600;
}

/* The Save bar: sticky inside the form, so it rests at the end of the sections instead of covering the footer.
   Save sits on the left, and the right is padded, because the chat button floats at the bottom right. */
#soRoot .so-savebar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: 2rem;
    padding: .85rem 4.75rem .85rem 1.25rem;
    border: 1px solid var(--so-stone);
    border-bottom: 0;
    border-radius: .5rem .5rem 0 0;
    background-color: #FFFFFF;
    box-shadow: 0 -.5rem 1.25rem rgba(60, 60, 59, .12);
}
#soRoot .so-savebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
#soRoot .so-savebar .btn {
    text-transform: none;
    font-size: .95rem;
    font-weight: 600;
}
#soRoot .so-savebar .so-save {
    border: 2px solid var(--so-teal);
    background-color: var(--so-teal);
    color: #FFFFFF;
    box-shadow: none;
}
#soRoot .so-savebar .so-save:hover,
#soRoot .so-savebar .so-save:active {
    background-color: var(--so-teal);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .18);
}
#soRoot .so-savebar .so-discard {
    border: 2px solid var(--so-teal);
    background-color: #FFFFFF;
    color: var(--so-teal);
    box-shadow: none;
}
#soRoot .so-savebar .so-discard:hover {
    background-color: rgba(0, 110, 123, .08);
    color: var(--so-teal);
}
#soRoot .so-savebar .btn:focus-visible {
    outline: 3px solid var(--so-teal);
    outline-offset: 2px;
}
#soRoot .so-savebar-status {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: .9rem;
    color: var(--so-slate);
}
#soRoot .so-savebar-status::before {
    content: "";
    flex-shrink: 0;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background-color: var(--so-stone);
}
#soRoot .so-savebar.is-dirty .so-savebar-status {
    color: var(--so-ink);
    font-weight: 600;
}
#soRoot .so-savebar.is-dirty .so-savebar-status::before {
    background-color: var(--so-amber);
}

@media (max-width: 767.98px) {
    #soRoot .so-toggle,
    #soRoot .so-subtoggle {
        grid-template-columns: 1rem minmax(0, 1fr);
        padding: .9rem 1rem;
    }
    #soRoot .so-chips {
        grid-column: 2;
        grid-row: auto;
        justify-content: flex-start;
        max-width: none;
    }
    #soRoot .so-panel {
        padding: .25rem 1rem 1.25rem;
    }
    #soRoot .so-subpanel {
        padding: .25rem .85rem 1rem;
    }
    #soRoot .so-figure-row {
        grid-template-columns: 1fr 1fr;
    }
    #soRoot .so-figure-name {
        grid-column: 1 / -1;
    }
    #soRoot .so-savebar {
        padding: .75rem 4.5rem .75rem 1rem;
    }
}
/* On a phone the two buttons stack (the right of the bar stays clear for the chat button), so the bar is kept compact:
   listing several changed sections, it took a third of a 375px screen */
@media (max-width: 575.98px) {
    #soRoot .so-savebar {
        gap: .5rem;
        padding: .6rem 4.25rem .6rem .85rem;
    }
    #soRoot .so-savebar-actions {
        gap: .5rem;
    }
    #soRoot .so-savebar .btn {
        padding: .4rem .85rem;
        font-size: .85rem;
    }
    #soRoot .so-savebar-status {
        font-size: .8rem;
        line-height: 1.35;
    }
}
@media (prefers-reduced-motion: reduce) {
    #soRoot .so-toggle::before,
    #soRoot .so-subtoggle::before {
        transition: none;
    }
}