/**
 * TPM UI Utilities Styles
 * Toast notifications, loading states, modals, and other UX enhancements
  * Scoped to body.tpm-page to override theme styles
 */

/* ===========================================
   TPM Typography Reset - Consistent fonts
   =========================================== */

/* Base font settings for all TPM elements (excludes Bootstrap and Font Awesome) */
body.tpm-page [class*="tpm-"]:not([class*="fa-"]):not([class*="icon-"]),
body.tpm-page [class*="tpm-"] p,
body.tpm-page [class*="tpm-"] span:not([class*="fa-"]):not([class*="icon-"]),
body.tpm-page [class*="tpm-"] a,
body.tpm-page [class*="tpm-"] strong,
body.tpm-page [class*="tpm-"] label,
body.tpm-page [class*="tpm-"] button:not([class*="btn-"]),
body.tpm-page [class*="tpm-"] input,
body.tpm-page [class*="tpm-"] select,
body.tpm-page [class*="tpm-"] textarea {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

body.tpm-page [class*="tpm-"] strong,
body.tpm-page [class*="tpm-"] b {
    font-weight: 600 !important;
}

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */

body.tpm-page #tpm-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

body.tpm-page .tpm-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 400px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
}

body.tpm-page .tpm-toast-visible {
    transform: translateX(0);
    opacity: 1;
}

body.tpm-page .tpm-toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

body.tpm-page .tpm-toast-success .tpm-toast-icon {
    background: #d4edda;
    color: #155724;
}

body.tpm-page .tpm-toast-error .tpm-toast-icon {
    background: #f8d7da;
    color: #721c24;
}

body.tpm-page .tpm-toast-warning .tpm-toast-icon {
    background: #fff3cd;
    color: #856404;
}

body.tpm-page .tpm-toast-info .tpm-toast-icon {
    background: #cce5ff;
    color: #004085;
}

body.tpm-page .tpm-toast-message {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

body.tpm-page .tpm-toast-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
}

body.tpm-page .tpm-toast-close:hover {
    opacity: 1;
}

/* ===========================================
   LOADING SPINNERS
   =========================================== */

body.tpm-page .tpm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tpm-spin 0.75s linear infinite;
    vertical-align: middle;
}

body.tpm-page .tpm-spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

body.tpm-page .tpm-spinner-xl {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

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

body.tpm-page .tpm-btn-loading {
    position: relative;
    cursor: wait !important;
}

/* Loading Overlay */
body.tpm-page .tpm-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: inherit;
}

body.tpm-page .tpm-loading-content {
    text-align: center;
}

body.tpm-page .tpm-loading-content p {
    margin-top: 15px;
    color: #666;
    font-size: 14px;
}

/* ===========================================
   MODAL DIALOGS
   =========================================== */

/* Modal overlay - for older modals using overlay approach */
body.tpm-page .tpm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.tpm-page .tpm-modal-overlay.tpm-modal-visible {
    opacity: 1;
}

/* New modal approach - display:none controlled by JS */
body.tpm-page .tpm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    align-items: center;
    justify-content: center;
}

/* Modal blur removed - was causing issues with modal content being blurred */

body.tpm-page .tpm-modal-content {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.3);
    max-width: 90%;
    width: 30rem;
    max-height: 90vh;
    overflow-y: auto;
    margin: 0 auto;
}

body.tpm-page .tpm-modal-header {
    padding: 1.5rem 1.875rem 1rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

body.tpm-page .tpm-modal-header h3 {
    margin: 0.625rem 0 0;
    font-size: 1.375rem;
    font-weight: 600;
    color: #1e293b;
}

body.tpm-page .tpm-modal-body {
    padding: 1.5rem 1.875rem;
    font-size: 1rem;
}

body.tpm-page .tpm-modal-body p {
    margin: 0;
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
}

body.tpm-page .tpm-modal-footer {
    padding: 1.25rem 1.875rem 1.5rem;
    background: #f8f9fa;
    border-radius: 0 0 0.75rem 0.75rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

body.tpm-page .tpm-modal-footer .tpm-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

/* ===========================================
   SEARCH/FILTER
   =========================================== */

body.tpm-page .tpm-search-box {
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
}

body.tpm-page .tpm-search-input {
    width: 100%;
    min-width: 250px;
    max-width: 300px;
    padding: 10px 70px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

body.tpm-page .tpm-search-input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

body.tpm-page .tpm-search-icon {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 14px;
}

body.tpm-page .tpm-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s;
}

body.tpm-page .tpm-search-input:not(:placeholder-shown) ~ .tpm-search-clear {
    opacity: 0.6;
}

body.tpm-page .tpm-search-clear:hover {
    opacity: 1;
    color: #333;
}

body.tpm-page .tpm-highlight {
    background: #fff59d;
    padding: 1px 2px;
    border-radius: 2px;
}

body.tpm-page .tpm-no-results td {
    text-align: center;
    padding: 30px !important;
    color: #999;
    font-style: italic;
}

/* ===========================================
   SORTABLE COLUMNS
   =========================================== */

body.tpm-page .tpm-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px !important;
}

body.tpm-page .tpm-sortable:hover {
    background: #f5f5f5;
}

body.tpm-page .tpm-sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
    font-size: 12px;
}

body.tpm-page .tpm-sortable.tpm-sort-asc::after {
    content: '↑';
    opacity: 0.8;
}

body.tpm-page .tpm-sortable.tpm-sort-desc::after {
    content: '↓';
    opacity: 0.8;
}

/* ===========================================
   EMPTY STATES
   =========================================== */

body.tpm-page .tpm-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

body.tpm-page .tpm-empty-state-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

body.tpm-page .tpm-empty-state h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

body.tpm-page .tpm-empty-state p {
    margin: 0 0 20px;
    font-size: 14px;
}

/* ===========================================
   CHARACTER COUNT
   =========================================== */

body.tpm-page .tpm-char-count {
    font-size: 12px;
    color: #999;
    text-align: right;
    margin-top: 4px;
}

body.tpm-page .tpm-char-count.tpm-char-warning {
    color: #e65100;
}

body.tpm-page .tpm-char-count.tpm-char-limit {
    color: #d32f2f;
}

/* ===========================================
   TOOLTIPS
   =========================================== */

body.tpm-page .tpm-tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    max-width: 250px;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    line-height: 1.4;
}

body.tpm-page .tpm-tooltip-visible {
    opacity: 1;
}

body.tpm-page .tpm-tooltip::after {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

body.tpm-page .tpm-tooltip-top::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #333;
}

body.tpm-page .tpm-tooltip-bottom::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #333;
}

body.tpm-page .tpm-tooltip-left::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #333;
}

body.tpm-page .tpm-tooltip-right::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #333;
}

/* ===========================================
   PROGRESS BAR
   =========================================== */

body.tpm-page .tpm-progress-container {
    margin-bottom: 25px;
}

body.tpm-page .tpm-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

body.tpm-page .tpm-progress-label {
    font-size: 14px;
    color: #555;
}

body.tpm-page .tpm-progress-count {
    font-size: 14px;
    font-weight: 600;
    color: #0073aa;
}

body.tpm-page .tpm-progress-bar {
    height: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}

body.tpm-page .tpm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0073aa, #00a0d2);
    border-radius: 4px;
    transition: width 0.3s ease;
}

body.tpm-page .tpm-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

body.tpm-page .tpm-analysis-actions {
    display: flex;
    gap: 10px;
}

/* ===========================================
   AUTO-SAVE INDICATOR
   =========================================== */

body.tpm-page .tpm-autosave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-left: auto;
}

body.tpm-page .tpm-autosave-saving {
    color: #856404;
    background: #fff3cd;
}

body.tpm-page .tpm-autosave-saved {
    color: #155724;
    background: #d4edda;
}

body.tpm-page .tpm-autosave-error {
    color: #721c24;
    background: #f8d7da;
}

/* ===========================================
   BUTTON ENHANCEMENTS
   =========================================== */

body.tpm-page .tpm-btn,
body.tpm-page .btn.tpm-btn,
body.tpm-page button.tpm-btn,
body.tpm-page a.tpm-btn,
body.tpm-page input.tpm-btn,
body.tpm-page button[type="submit"].tpm-btn,
body.tpm-page button[type="submit"].btn,
body.tpm-page button[type="button"].tpm-btn,
body.tpm-page button[type="button"].btn {
    display: inline-block;
    padding: 0.375rem 0.75rem !important;
    height: auto !important;
    min-height: auto !important;
    color: white;
    text-decoration: none !important;
    border-radius: var(--tpm-radius-sm, 6px);
    border: none !important;
    cursor: pointer;
    font-weight: 500 !important;
    transition: background 0.2s, transform 0.2s;
}

body.tpm-page .tpm-btn:hover {
    background: var(--tpm-primary-hover, #005a87);
    color: white;
    transform: translateY(-1px);
}

body.tpm-page .tpm-btn-primary,
body.tpm-page .tpm-btn.tpm-btn-primary {
    background: var(--tpm-primary, #0073aa) !important;
    color: #ffffff !important;
    border: none !important;
}

body.tpm-page .tpm-btn-primary:hover,
body.tpm-page .tpm-btn.tpm-btn-primary:hover {
    background: var(--tpm-primary-hover, #005a87) !important;
    color: #ffffff !important;
}

body.tpm-page .tpm-btn-secondary {
    background: var(--tpm-secondary, #6c757d) !important;
    color: #fff !important;
    border: none !important;
}

body.tpm-page .tpm-btn-secondary:hover {
    background: var(--tpm-secondary-hover, #5a6268) !important;
}

body.tpm-page .tpm-btn-danger {
    background: var(--tpm-danger, #dc3545) !important;
    color: #fff !important;
    border: none !important;
}

body.tpm-page .tpm-btn-danger:hover {
    background: var(--tpm-danger-hover, #c82333) !important;
}

body.tpm-page .tpm-btn-success {
    background: var(--tpm-success, #28a745) !important;
    color: #fff !important;
    border: none !important;
}

body.tpm-page .tpm-btn-success:hover {
    background: var(--tpm-success-hover, #218838) !important;
}

body.tpm-page .tpm-btn-warning {
    background: #f59e0b !important;
    color: #fff !important;
    border: none !important;
}

body.tpm-page .tpm-btn-warning:hover {
    background: #d97706 !important;
}

body.tpm-page .tpm-btn-small {
    font-size: 13px;
}

/* ===========================================
   SUCCESS ANIMATION
   =========================================== */

/* Animated SVG Checkmark */
body.tpm-page .tpm-success-display {
    text-align: center;
    padding: 1.25rem 0;
}

body.tpm-page .tpm-success-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.25rem;
}

body.tpm-page .tpm-checkmark {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #22c55e;
    stroke-miterlimit: 10;
    box-shadow: inset 0 0 0 #22c55e;
    animation: tpm-fill 0.4s ease-in-out 0.4s forwards, tpm-scale 0.3s ease-in-out 0.9s both;
}

body.tpm-page .tpm-checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #22c55e;
    fill: none;
    animation: tpm-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

body.tpm-page .tpm-checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    animation: tpm-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes tpm-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes tpm-scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes tpm-fill {
    100% {
        box-shadow: inset 0 0 0 2.5rem #f0fdf4;
    }
}

body.tpm-page .tpm-success-heading {
    color: #166534;
    font-size: 1.375rem;
    margin: 0 0 0.625rem;
    font-weight: 600;
}

body.tpm-page .tpm-success-message {
    color: #64748b;
    font-size: 0.9375rem;
    margin: 0;
    line-height: 1.5;
}

/* Legacy success check (non-animated) */
body.tpm-page .tpm-success-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #d4edda;
    color: #28a745;
    font-size: 32px;
    animation: tpm-success-pop 0.4s ease;
}

@keyframes tpm-success-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 480px) {
    body.tpm-page #tpm-toast-container {
        left: 10px;
        right: 10px;
        top: 10px;
    }
    
    body.tpm-page .tpm-toast {
        min-width: auto;
        max-width: none;
    }
    
    body.tpm-page .tpm-modal {
        width: calc(100% - 20px);
        margin: 10px;
    }
    
    body.tpm-page .tpm-search-input {
        max-width: none;
    }
}

/* ===========================================
   SUCCESS ICON (Animated Checkmark)
   =========================================== */

body.tpm-page .tpm-success-icon-wrapper {
    margin-bottom: 25px;
}

body.tpm-page .tpm-success-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

body.tpm-page .tpm-checkmark-svg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #22c55e;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #22c55e;
    animation: tpm-fill .4s ease-in-out .4s forwards, tpm-scale .3s ease-in-out .9s both;
}

body.tpm-page .tpm-checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #22c55e;
    fill: none;
    animation: tpm-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

body.tpm-page .tpm-checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    animation: tpm-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes tpm-stroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes tpm-scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

@keyframes tpm-fill {
    100% { box-shadow: inset 0px 0px 0px 50px #f0fdf4; }
}

body.tpm-page .tpm-success-title {
    color: #166534;
    font-size: 28px;
    margin: 0 0 10px;
    font-weight: 700;
}

body.tpm-page .tpm-success-subtitle {
    color: #64748b;
    font-size: 16px;
    margin: 0 0 30px;
}

/* Smaller variant for inline use */
body.tpm-page .tpm-success-icon-wrapper.tpm-success-sm .tpm-success-circle ,
body.tpm-page .tpm-success-icon-wrapper.tpm-success-sm .tpm-checkmark-svg {
    width: 60px;
    height: 60px;
}

body.tpm-page .tpm-success-icon-wrapper.tpm-success-sm {
    margin-bottom: 15px;
}

/* Success Display Container */
body.tpm-page .tpm-success-display {
    text-align: center;
    padding: 20px 0;
}

body.tpm-page .tpm-success-heading {
    color: #166534;
    font-size: 22px;
    margin: 0 0 10px;
    font-weight: 600;
}

body.tpm-page .tpm-success-message {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 25px;
    line-height: 1.5;
}

body.tpm-page .tpm-success-link {
    color: #166534 !important;
    text-decoration: underline !important;
    font-size: 15px;
    font-weight: 500;
}

body.tpm-page .tpm-success-link:hover {
    color: #14532d !important;
}

/* Assignment Actions */
body.tpm-page .tpm-assignment-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

body.tpm-page .tpm-copy-link-btn {
    white-space: nowrap;
}

body.tpm-page .tpm-completed-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    body.tpm-page .tpm-assignment-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Patient Details Form */
body.tpm-page .tpm-patient-edit-card {
    background: #f8fafc;
}

body.tpm-page .tpm-patient-details-form {
    margin-top: 1rem;
}

body.tpm-page .tpm-form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

body.tpm-page .tpm-form-group {
    flex: 1;
    min-width: 150px;
}

body.tpm-page .tpm-form-group-small {
    flex: 0 0 100px;
    min-width: 100px;
}

body.tpm-page .tpm-form-group-full {
    flex: 0 0 100%;
}

body.tpm-page .tpm-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.375rem;
}

body.tpm-page .tpm-form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

body.tpm-page .tpm-save-status {
    font-size: 0.875rem;
    color: #6b7280;
}

body.tpm-page .tpm-save-status.tpm-save-success {
    color: #059669;
}

body.tpm-page .tpm-save-status.tpm-save-error {
    color: #dc2626;
}

@media (max-width: 640px) {
    body.tpm-page .tpm-form-row {
        flex-direction: column;
    }
    
    body.tpm-page .tpm-form-group-small {
        flex: 1;
    }
}


/* ===================================
   TPM PAGE HEADER RESET - FINAL
   ===================================
   Ensures Salient theme header displays correctly on TPM pages
   Prevents poetry/Ethereal CSS from affecting TPM page headers
   
   IMPORTANT: Excludes the following from font-family targeting:
   - `i` tags (Font Awesome icons)
   - [class*="fa-"] (Font Awesome classes)
   - [class*="icon-"] (generic icon classes)
   - [class*="ab-icon"] (WordPress admin bar icons)
*/

/* Import Open Sans font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* ===================================
   TYPOGRAPHY RESET FOR TPM PAGES
   Excludes i tags (Font Awesome) and icon classes
   =================================== */

/* Base font settings - excludes Font Awesome and icon classes */
body.tpm-page h1,
body.tpm-page h2,
body.tpm-page h3,
body.tpm-page h4,
body.tpm-page h5,
body.tpm-page h6,
body.tpm-page p,
body.tpm-page span:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]):not(.nectar-menu-icon),
body.tpm-page a:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
body.tpm-page strong,
body.tpm-page em,
body.tpm-page b,
body.tpm-page label,
body.tpm-page li,
body.tpm-page td,
body.tpm-page th,
body.tpm-page div:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
body.tpm-page button:not([class*="btn-"]),
body.tpm-page input,
body.tpm-page select,
body.tpm-page textarea,
body.tpm-page option {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* NOTE: `i` tag is intentionally NOT included above to preserve Font Awesome icons */
/* Also excludes: fa-, icon-, ab-icon classes */


/* ===================================
   RESET HEADER ON TPM PAGES
   Prevents category themes from affecting TPM pages
   =================================== */

/* Force default header styling on TPM pages */
body.tpm-page #header-outer {
    background-color: #ffffff !important;
}

body.tpm-page #header-outer[data-transparent-header="true"] {
    background-color: transparent !important;
}

/* Navigation text - reset to default navy/dark (excludes icons) */
body.tpm-page #header-outer #top nav > ul > li > a,
body.tpm-page #header-outer .sf-menu > li > a,
body.tpm-page #header-outer nav a {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #0A2540 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* TPM role switcher link text - excludes Font Awesome icons */
body.tpm-page #header-outer .tpm-link-tpm-current-role,
body.tpm-page #header-outer .tpm-link-tpm-current-role span:not([class*="fa-"]):not([class*="icon-"]):not(.nectar-menu-icon),
body.tpm-page #header-outer .tpm-link-tpm-current-role .menu-title-text {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #0A2540 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body.tpm-page #header-outer #top nav > ul > li > a:hover,
body.tpm-page #header-outer .sf-menu > li > a:hover,
body.tpm-page #header-outer nav a:hover,
body.tpm-page #header-outer .tpm-link-tpm-current-role:hover,
body.tpm-page #header-outer .tpm-link-tpm-current-role:hover * {
    color: #0073aa !important;
}

/* Animated underline - match hover color */
body.tpm-page #header-outer nav > ul > li > a::after,
body.tpm-page #header-outer .sf-menu > li > a::after,
body.tpm-page #header-outer #top nav > ul > li > a::after,
body.tpm-page #header-outer .nectar-header-text-color a::after,
body.tpm-page #header-outer[data-lhe="animated_underline"] nav > ul > li > a::after,
body.tpm-page #header-outer[data-lhe="animated_underline"] .sf-menu > li > a::after {
    background-color: #0073aa !important;
}

/* Salient specific underline selectors */
body.tpm-page #header-outer .menu-item > a .menu-title-text::after,
body.tpm-page #header-outer .sf-menu .menu-item > a .menu-title-text::after,
body.tpm-page #header-outer nav .menu-title-text::after {
    background-color: #0073aa !important;
}

/* Salient menu title text - high specificity to override theme */
/* Excludes Font Awesome and icon elements */
body.tpm-page #header-outer #top .menu-title-text:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
body.tpm-page #header-outer #top nav .menu-title-text:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
body.tpm-page #header-outer #top nav ul li .menu-title-text:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
body.tpm-page #header-outer .sf-menu > li > a .menu-title-text:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
body.tpm-page #header-outer .sf-menu li a .menu-title-text:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
body.tpm-page #header-outer .nectar-menu-icon-text .menu-title-text:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
html body.tpm-page #header-outer .menu-title-text:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]) {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Ensure Font Awesome icons inside menu are preserved - DO NOT set font-family */
body.tpm-page #header-outer .nectar-menu-icon,
body.tpm-page #header-outer .nectar-menu-icon i,
body.tpm-page #header-outer i.fa,
body.tpm-page #header-outer i.fas,
body.tpm-page #header-outer i.far,
body.tpm-page #header-outer i.fab,
body.tpm-page #header-outer i[class*="fa-"],
body.tpm-page #header-outer i[class*="icon-"] {
    /* No font-family override - let Font Awesome use its own font */
    font-style: normal !important;
}

/* Dropdown/submenu - inherit from Salient theme (no overrides) */


/* ===================================
   ICONS - Style separately (NOT font-family)
   Font Awesome uses `i` tags - only set color, not font
   =================================== */

/* All header icons - consistent color only */
body.tpm-page #header-outer [class*="icon-"],
body.tpm-page #header-outer .fa,
body.tpm-page #header-outer .fas,
body.tpm-page #header-outer .far,
body.tpm-page #header-outer .fab,
body.tpm-page #header-outer i[class*="icon"],
body.tpm-page #header-outer i.fa,
body.tpm-page #header-outer svg {
    color: #0A2540 !important;
    fill: #0A2540 !important;
    /* NO font-family here - preserves Font Awesome */
}

body.tpm-page #header-outer [class*="icon-"]:hover,
body.tpm-page #header-outer .fa:hover,
body.tpm-page #header-outer i.fa:hover,
body.tpm-page #header-outer svg:hover {
    color: #0073aa !important;
    fill: #0073aa !important;
}

/* Search icon */
body.tpm-page #header-outer .nectar-search-button,
body.tpm-page #header-outer #search-btn {
    color: #0A2540 !important;
}

/* Cart icon */
body.tpm-page #header-outer .cart-menu-btn,
body.tpm-page #header-outer .woo-cart-link {
    color: #0A2540 !important;
}


/* ===================================
   MOBILE HAMBURGER MENU
   =================================== */

body.tpm-page #header-outer .slide-out-widget-area-toggle a,
body.tpm-page #header-outer .mobile-menu-toggle {
    color: #0A2540 !important;
}

body.tpm-page #header-outer .slide-out-widget-area-toggle .lines,
body.tpm-page #header-outer .slide-out-widget-area-toggle .lines::before,
body.tpm-page #header-outer .slide-out-widget-area-toggle .lines::after {
    background-color: #0A2540 !important;
}


/* ===================================
   LOGO - Ensure visibility
   =================================== */

body.tpm-page #header-outer #logo img,
body.tpm-page #header-outer .logo-image img {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ===================================
   PAGE HEADER / TITLE AREA
   =================================== */

/* Reset page header to dark on TPM pages (for white h1) */
body.tpm-page #page-header-wrap,
body.tpm-page #page-header-bg {
    background-color: #0A2540 !important;
    text-align: center !important;
}

body.tpm-page #page-header-wrap .container,
body.tpm-page #page-header-bg .container,
body.tpm-page #page-header-wrap .row,
body.tpm-page #page-header-bg .row,
body.tpm-page #page-header-wrap .col,
body.tpm-page #page-header-bg .col {
    text-align: center !important;
    justify-content: center !important;
}

body.tpm-page #page-header-wrap h1,
body.tpm-page #page-header-bg h1,
body.tpm-page .page-header-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    color: #FFFFFF !important;
    font-style: italic !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Page header overlay - subtle dark */
body.tpm-page #page-header-bg::after {
    background: rgba(10, 37, 64, 0.3) !important;
}


/* ===================================
   CONTENT AREA - TPM Specific
   Excludes i tags and icon classes
   =================================== */

/* Reset container-wrap for TPM pages */
body.tpm-page .container-wrap {
    background-color: #ffffff !important;
}

/* Headings */
body.tpm-page .container-wrap h1,
body.tpm-page .container-wrap h2,
body.tpm-page .container-wrap h3,
body.tpm-page .container-wrap h4 {
    color: #1e1e1e !important;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Text elements - excludes icons */
body.tpm-page .container-wrap p,
body.tpm-page .container-wrap li,
body.tpm-page .container-wrap span:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]),
body.tpm-page .container-wrap label,
body.tpm-page .container-wrap td,
body.tpm-page .container-wrap th {
    color: #333333 !important;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Button text - override container-wrap span color (except outline) */
body.tpm-page .container-wrap .tpm-btn:not(.tpm-btn-outline):not(.tpm-btn-link) span,
body.tpm-page .container-wrap .tpm-btn:not(.tpm-btn-outline):not(.tpm-btn-link) .btn-text,
body.tpm-page .container-wrap .tpm-btn-primary span,
body.tpm-page .container-wrap button.tpm-btn:not(.tpm-btn-outline):not(.tpm-btn-link) span {
    color: #ffffff !important;
}

/* Links - excludes icons and buttons */
body.tpm-page .container-wrap a:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]):not([class*="tpm-btn"]) {
    color: #0073aa !important;
}

body.tpm-page .container-wrap a:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]):not([class*="tpm-btn"]):hover {
    color: #005a87 !important;
}


/* ===================================
   SIDEBAR - Reset for TPM
   =================================== */

body.tpm-page #sidebar,
body.tpm-page .sidebar {
    background-color: transparent !important;
}

body.tpm-page #sidebar h4,
body.tpm-page #sidebar .widget-title {
    color: #1e1e1e !important;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body.tpm-page #sidebar a:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]) {
    color: #0073aa !important;
}


/* ===================================
   FOOTER - Consistent styling
   =================================== */

body.tpm-page #footer-outer {
    background-color: #061525 !important;
}

body.tpm-page #footer-outer a:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]) {
    color: #B8A978 !important;
}

body.tpm-page #footer-outer p,
body.tpm-page #footer-outer span:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]) {
    color: #cccccc !important;
}


/* ===================================
   PREVENT CATEGORY THEME BLEEDING
   Explicitly exclude TPM pages from poetry themes
   =================================== */

/* These rules ensure category-specific CSS doesn't apply to TPM pages */
body.tpm-page.category-tar .container-wrap,
body.tpm-page.category-introspection .container-wrap,
body.tpm-page.category-innocence .container-wrap,
body.tpm-page.category-renewal .container-wrap,
body.tpm-page[class*="category-"] .container-wrap {
    background-color: #ffffff !important;
}

/* Page header stays dark navy regardless of category */
body.tpm-page[class*="category-"] #page-header-wrap,
body.tpm-page[class*="category-"] #page-header-bg {
    background-color: #0A2540 !important;
}

body.tpm-page.category-tar .container-wrap h1,
body.tpm-page.category-tar .container-wrap h2,
body.tpm-page.category-introspection .container-wrap h1,
body.tpm-page.category-introspection .container-wrap h2,
body.tpm-page.category-innocence .container-wrap h1,
body.tpm-page.category-innocence .container-wrap h2,
body.tpm-page.category-renewal .container-wrap h1,
body.tpm-page.category-renewal .container-wrap h2,
body.tpm-page[class*="category-"] .container-wrap h1,
body.tpm-page[class*="category-"] .container-wrap h2 {
    color: #1e1e1e !important;
}

/* Page header h1 stays styled regardless of category */
body.tpm-page[class*="category-"] #page-header-wrap h1,
body.tpm-page[class*="category-"] #page-header-bg h1 {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    color: #FFFFFF !important;
    font-style: italic !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.tpm-page[class*="category-"] .container-wrap p,
body.tpm-page[class*="category-"] .container-wrap a:not([class*="fa-"]):not([class*="icon-"]):not([class*="ab-icon"]):not([class*="tpm-btn"]) {
    color: inherit !important;
}