/**
 * Access Control Styling
 * Handles locked state, lock icons, and pricing overlay modal
 */

/* Lock icon styling */
.lock-icon {
    display: inline-block;
    visibility: hidden;
    margin-left: 8px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8ZM12 13.25C12.4142 13.25 12.75 13.5858 12.75 14V18C12.75 18.4142 12.4142 18.75 12 18.75C11.5858 18.75 11.25 18.4142 11.25 18V14C11.25 13.5858 11.5858 13.25 12 13.25Z' fill='%23F8C72F'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Show lock icon when button is locked */
.sticky-action-item.locked .lock-icon {
    visibility: visible;
}

/* Locked button cursor */
.sticky-action-item.locked button {
    cursor: pointer;
}

/* Pricing Overlay Modal - Full CSS Reset & Isolation */
.pricing-overlay-modal {
    all: initial !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    z-index: 100001 !important; /* Higher than FINN limit modal (100000) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

.pricing-overlay-modal * {
    box-sizing: border-box !important;
}

.pricing-overlay-content {
    position: relative !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    max-width: 1200px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.pricing-overlay-inner {
    padding: 50px 30px 30px !important;
}

.pricing-overlay-close {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    font-size: 36px !important;
    line-height: 1 !important;
    color: #dc2626 !important;
    cursor: pointer !important;
    padding: 5px 10px !important;
    z-index: 1 !important;
    transition: color 0.2s ease !important;
}

.pricing-overlay-close:hover {
    color: #b91c1c !important;
    background: transparent !important;
}

/* Hide modal by default */
.pricing-overlay-modal[style*="display: none"] {
    display: none !important;
}

/* FINN Import Button Access Control */
.info-finn-button.locked {
    background-color: #fff !important;
    color: #333;
    border: 1px solid #ddd;
    position: relative;
}

.info-finn-button.locked .lock-icon {
    visibility: visible;
}

.info-finn-button.locked:hover {
    background-color: #f5f5f5 !important;
}

/* Keep normal green style for unlocked FINN button */
.info-finn-button:not(.locked) {
    background-color: #22c55e;
    color: #fff;
}

/* ============================================
   Scenario Selector Lock (Flipping Calculator)
   ============================================ */

/* Locked scenario button */
.seg-btn.locked {
    opacity: 0.8;
    cursor: pointer;
}

.seg-btn.locked .lock-icon {
    visibility: visible;
    margin-left: 4px;
}

/* Prevent locked scenario from being selected */
.seg-btn.locked:hover {
    background-color: inherit;
}

/* Chart Lock Overlay */
.sim-chart-container {
    position: relative;
}

.locked-chart canvas {
    filter: blur(8px);
    pointer-events: none;
}

.chart-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 10;
}

.locked-chart .chart-lock-overlay {
    display: flex;
}

.chart-lock-icon {
    display: inline-block;
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8ZM12 13.25C12.4142 13.25 12.75 13.5858 12.75 14V18C12.75 18.4142 12.4142 18.75 12 18.75C11.5858 18.75 11.25 18.4142 11.25 18V14C11.25 13.5858 11.5858 13.25 12 13.25Z' fill='%23F8C72F'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pricing-overlay-content {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    .pricing-overlay-inner {
        padding: 50px 15px 15px;
    }

    .lock-icon {
        width: 14px;
        height: 14px;
        margin-left: 4px;
    }

    .chart-lock-icon {
        width: 48px;
        height: 48px;
    }
}

/* ============================================
   10-Year Simulation Table Lock
   ============================================ */

/* Blur the table when locked */
.locked-table table {
    filter: blur(8px);
    pointer-events: none;
}

/* Lock overlay for table */
.table-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 10;
}

/* Large lock icon for table overlay */
.table-lock-overlay .lock-icon-large {
    display: inline-block;
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8ZM12 13.25C12.4142 13.25 12.75 13.5858 12.75 14V18C12.75 18.4142 12.4142 18.75 12 18.75C11.5858 18.75 11.25 18.4142 11.25 18V14C11.25 13.5858 11.5858 13.25 12 13.25Z' fill='%23F8C72F'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

/* Mobile adjustments for table lock */
@media (max-width: 768px) {
    .table-lock-overlay .lock-icon-large {
        width: 48px;
        height: 48px;
    }
}

/* ============================================
   Pricing Table Inside Modal - Override Styles
   Note: Using !important and explicit styles because
   the modal needs full CSS isolation from page builders.
   ============================================ */

/* Remove extra padding from pricing wrapper inside modal */
.pricing-overlay-inner .utleiekalk-pricing-wrapper {
    background: transparent !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Ensure toggle wrapper fits inside modal */
.pricing-overlay-inner .pricing-toggle-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
}

.pricing-overlay-inner .pricing-toggle {
    display: inline-flex !important;
    background: linear-gradient(135deg, rgba(244, 244, 244, 0.95) 0%, rgba(232, 245, 241, 0.95) 100%) !important;
    border-radius: 16px !important;
    padding: 6px !important;
}

.pricing-overlay-inner .toggle-btn {
    padding: 12px 28px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2c5f4d !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pricing-overlay-inner .toggle-btn.active {
    background: linear-gradient(135deg, rgba(4, 114, 77, 0.9) 0%, rgba(3, 90, 61, 0.95) 100%) !important;
    color: #ffffff !important;
}

/* Heading styles inside modal */
.pricing-overlay-inner .pricing-heading {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto 30px !important;
}

.pricing-overlay-inner .pricing-heading-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #04724d !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.pricing-overlay-inner .pricing-heading-subtitle {
    font-size: 16px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Ensure pricing cards display correctly with flexbox for centering */
.pricing-overlay-inner .pricing-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-content: center !important;
}

/* Individual card styling */
.pricing-overlay-inner .pricing-card {
    flex: 0 1 300px !important;
    max-width: 340px !important;
    min-width: 260px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 32px 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(4, 114, 77, 0.08) !important;
}

/* Single card in overlay - make it wider */
.pricing-overlay-inner .pricing-card:only-child {
    flex: 0 1 450px !important;
    max-width: 480px !important;
}

.pricing-overlay-inner .pricing-card-header {
    text-align: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(4, 114, 77, 0.08) !important;
}

.pricing-overlay-inner .pricing-card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #04724d !important;
    margin: 0 !important;
}

.pricing-overlay-inner .pricing-card-price {
    text-align: center !important;
    margin-bottom: 28px !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pricing-overlay-inner .price-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.pricing-overlay-inner .price-amount {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #04724d !important;
    line-height: 1 !important;
}

.pricing-overlay-inner .price-period {
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

.pricing-overlay-inner .pricing-card-features {
    flex-grow: 1 !important;
    margin-bottom: 28px !important;
}

.pricing-overlay-inner .pricing-card-features ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pricing-overlay-inner .pricing-card-features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.6 !important;
}

.pricing-overlay-inner .feature-icon {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    color: #04724d !important;
    margin-top: 2px !important;
}

.pricing-overlay-inner .pricing-card-action {
    text-align: center !important;
}

.pricing-overlay-inner .pricing-btn {
    display: inline-block !important;
    width: 100% !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #04724d 0%, #035a3d 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
}

/* Mobile/Tablet: stack cards vertically in modal */
@media (max-width: 900px) {
    .pricing-overlay-inner .pricing-cards {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .pricing-overlay-inner .pricing-card {
        flex: 0 1 auto !important;
        width: 100% !important;
        max-width: 380px !important;
        min-width: auto !important;
    }

    .pricing-overlay-content {
        max-width: 450px !important;
    }

    .pricing-overlay-inner .pricing-heading-title {
        font-size: 26px !important;
    }

    .pricing-overlay-inner .pricing-heading-subtitle {
        font-size: 15px !important;
    }
}