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

   EchoStream Policies Modal

   Shared across all skins - Light/Dark aware

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



.es-modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    backdrop-filter: blur(8px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.es-modal-overlay.active {

    opacity: 1;

    visibility: visible;

}



.es-modal {

    background: var(--bg-primary, #1a1a1a);

    border: 1px solid var(--border-color, #333);

    border-radius: 16px;

    width: 90%;

    max-width: 640px;

    max-height: 85vh;

    display: flex;

    flex-direction: column;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    transform: scale(0.9) translateY(20px);

    transition: transform 0.3s ease;

    color: var(--text-primary, #fff);

}



/* Light theme support */

[data-theme="light"] .es-modal,

.light-mode .es-modal {

    background: #ffffff;

    border-color: #e0e0e0;

    color: #1a1a1a;

}



.es-modal-overlay.active .es-modal {

    transform: scale(1) translateY(0);

}



.es-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 24px;

    border-bottom: 1px solid var(--border-color, #333);

}



[data-theme="light"] .es-modal-header,

.light-mode .es-modal-header {

    border-color: #e0e0e0;

}



.es-modal-header h2 {

    margin: 0;

    font-size: 20px;

    font-weight: 600;

    color: var(--text-primary, #fff);

    display: flex;

    align-items: center;

    gap: 12px;

}



[data-theme="light"] .es-modal-header h2,

.light-mode .es-modal-header h2 {

    color: #1a1a1a;

}



.es-modal-header h2 i {

    color: var(--nw-accent, #10b981);

}



.es-modal-close {

    background: var(--bg-tertiary, #2a2a2a);

    border: none;

    color: var(--text-muted, #888);

    font-size: 18px;

    cursor: pointer;

    padding: 10px 12px;

    border-radius: 8px;

    transition: all 0.2s;

}



[data-theme="light"] .es-modal-close,

.light-mode .es-modal-close {

    background: #f0f0f0;

    color: #666;

}



.es-modal-close:hover {

    background: var(--bg-hover, #3a3a3a);

    color: var(--text-primary, #fff);

}



[data-theme="light"] .es-modal-close:hover,

.light-mode .es-modal-close:hover {

    background: #e0e0e0;

    color: #1a1a1a;

}



.es-modal-body {

    flex: 1;

    overflow-y: auto;

    padding: 24px;

}



.es-modal-section {

    margin-bottom: 28px;

}



.es-modal-section:last-child {

    margin-bottom: 0;

}



.es-modal-section.es-highlight {

    background: var(--bg-tertiary, #252525);

    border: 1px solid var(--nw-accent, #10b981);

    border-radius: 12px;

    padding: 20px;

}



[data-theme="light"] .es-modal-section.es-highlight,

.light-mode .es-modal-section.es-highlight {

    background: #f0fdf4;

}



.es-modal-section h3 {

    font-size: 16px;

    font-weight: 600;

    color: var(--text-primary, #fff);

    margin: 0 0 16px;

    display: flex;

    align-items: center;

    gap: 10px;

}



[data-theme="light"] .es-modal-section h3,

.light-mode .es-modal-section h3 {

    color: #1a1a1a;

}



.es-modal-section h3 i {

    color: var(--nw-accent, #10b981);

    font-size: 18px;

}



.es-modal-section p {

    color: var(--text-secondary, #aaa);

    line-height: 1.7;

    margin: 0 0 12px;

}



[data-theme="light"] .es-modal-section p,

.light-mode .es-modal-section p {

    color: #555;

}



.es-modal-section p:last-child {

    margin-bottom: 0;

}



.es-modal-section ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.es-modal-section li {

    color: var(--text-secondary, #aaa);

    padding: 8px 0;

    padding-left: 28px;

    position: relative;

    line-height: 1.5;

}



[data-theme="light"] .es-modal-section li,

.light-mode .es-modal-section li {

    color: #555;

}



.es-modal-section li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color: var(--nw-accent, #10b981);

    font-weight: bold;

}



.es-modal-section li strong {

    color: var(--text-primary, #fff);

}



[data-theme="light"] .es-modal-section li strong,

.light-mode .es-modal-section li strong {

    color: #1a1a1a;

}



.es-modal-footer {

    padding: 20px 24px;

    border-top: 1px solid var(--border-color, #333);

    text-align: center;

}



[data-theme="light"] .es-modal-footer,

.light-mode .es-modal-footer {

    border-color: #e0e0e0;

}



.es-modal-footer p {

    color: var(--text-muted, #888);

    font-size: 14px;

    margin: 0 0 16px;

}



[data-theme="light"] .es-modal-footer p,

.light-mode .es-modal-footer p {

    color: #666;

}



.es-modal-footer strong {

    color: var(--text-primary, #fff);

}



[data-theme="light"] .es-modal-footer strong,

.light-mode .es-modal-footer strong {

    color: #1a1a1a;

}



.es-modal-btn {

    padding: 12px 32px;

    background: var(--nw-accent, #10b981);

    border: none;

    border-radius: 8px;

    color: white;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

}



.es-modal-btn:hover {

    filter: brightness(1.1);

    transform: translateY(-1px);

}



/* Scrollbar styling */

.es-modal-body::-webkit-scrollbar {

    width: 8px;

}



.es-modal-body::-webkit-scrollbar-track {

    background: var(--bg-tertiary, #252525);

    border-radius: 4px;

}



.es-modal-body::-webkit-scrollbar-thumb {

    background: var(--border-color, #444);

    border-radius: 4px;

}



.es-modal-body::-webkit-scrollbar-thumb:hover {

    background: var(--text-muted, #666);

}



/* Mobile responsive */

@media (max-width: 640px) {

    .es-modal {

        width: 95%;

        max-height: 90vh;

        border-radius: 12px;

    }

    

    .es-modal-header {

        padding: 16px 20px;

    }

    

    .es-modal-body {

        padding: 20px;

    }

    

    .es-modal-footer {

        padding: 16px 20px;

    }

}