/* Extracted Styles */

        /* Paste this code into the CSS section of your Mobirise block */
        body {
            font-family: 'Inter', sans-serif;
        }
        .placeholder-gray::placeholder {
            color: #9CA3AF;
        }
        .section-container {
            page-break-inside: avoid;
        }
        .price-display {
            width: 100px; /* Fixed width for alignment */
            text-align: right;
        }
        /* --- ALA CARTE TABLE STYLES --- */
        .ala-carte-table { 
            display: block; 
            overflow-x: auto; 
            overflow-y: hidden; /* <--- Fixes the up/down scrollbar */
            white-space: nowrap; 
            width: 100%; 
            border: 1px solid #e5e7eb; 
        }

        /* 1. GRID DEFINITION */
        .ala-carte-table .table-header, 
        .ala-carte-table .table-row {
            display: grid;
            /* 7 Columns: Description | Databases | Licenses | Total List OT | Total List MRR | Total VAR OT | Total VAR MRR */
            grid-template-columns: 220px 90px 90px 130px 130px 130px 130px;
            gap: 1rem; align-items: center; padding: 0.5rem;
        }

        .ala-carte-table .table-row {
            border-bottom: 1px solid #e5e7eb;
        }
        .ala-carte-table .table-row:hover {
            background-color: #f9fafb;
        }

        /* HEADER CELL STYLING */
        .ala-carte-table .table-header .table-cell {
            background-color: #f3f4f6; 
            font-weight: 700; /* Bold */
            color: black;     /* Changed from #374151 to Black */
            height: 100%; display: flex; align-items: center;
        }

        /* 3. FREEZE LEFT COLUMN (Item Description) */
        .ala-carte-table .table-row .table-cell:first-child,
        .ala-carte-table .table-header .table-cell:first-child {
            position: sticky;
            left: 0;
            z-index: 20;
            background-color: white; 
            border-right: 2px solid #e5e7eb; 
            height: 100%;       
            display: flex;      
            align-items: center; 
        }

        /* Specific style for the Header's first cell (Keep it Gray) */
        .ala-carte-table .table-header .table-cell:first-child {
            background-color: #f3f4f6; 
            z-index: 30; 
        }

        /* Hover style for the Body's first cell */
        .ala-carte-table .table-row:hover .table-cell:first-child {
            background-color: #f9fafb; 
        }

        /* 4. GENERAL TEXT STYLES */
        .ala-carte-table .table-cell {
            white-space: normal;
            font-size: 0.875rem;
            line-height: 1.25rem;
        }

        /* 5. INPUT FIELD STYLES */
        .ala-carte-table input[type="number"], .ala-carte-table input[type="text"] {
            width: 80px;
        }
        .custom-license-input {
            border-color: #F87171; 
        }
        /* 1. Base style for inputs */
        .db-input, .license-input {
            border-width: 2px;
            transition: border-color 0.2s;
        }

        /* 2. Active Green Border (For DBs, Clinical Assistant, Dragon) */
        .active-green-border {
            border-color: #34D399 !important; /* Green */
            border-style: solid !important;
        }

        /* 3. Active Red Border (For other custom fields requiring input) */
        .active-red-border {
            border-color: #F87171 !important; /* Red */
            border-style: solid !important;
        }
        
        /* Utility to ensure tooltip container stays inline */
        .tooltip-container.inline-block {
            display: inline-block;
            margin-left: 4px;
        }

        /* 6. SUMMARY TABLE STYLES */
        .summary-table {
            width: 100%;
            margin-top: 1rem;
        }
        .summary-table th, .summary-table td {
            text-align: right;
            padding: 0.5rem;
        }
        .summary-table th:first-child, .summary-table td:first-child {
            text-align: left;
            font-weight: 600;
        }
        .summary-table .total-row td {
            font-weight: 700;
            border-top: 2px solid #6b7280;
        }
        /* --- TOOLTIP STYLES (Portal Pattern) --- */
        .tooltip-container {
            display: inline-block;
            margin-left: 6px;
            cursor: pointer;
        }
        
        .tooltip-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            background-color: #3B82F6;
            color: white;
            border-radius: 50%;
            font-size: 10px;
            font-weight: bold;
            font-style: italic;
            transition: background-color 0.2s ease, box-shadow 0.2s ease;
        }

        .tooltip-icon:hover {
            background-color: #1D4ED8;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        }

        .tooltip-text {
            display: none;
            width: 250px;
            background-color: #1F2937;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 8px 12px;
            position: fixed;
            z-index: 999999;
            opacity: 0;
            transition: opacity 0.2s ease-in-out;
            font-size: 12px;
            line-height: 1.4;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            white-space: normal;
            pointer-events: none;
        }

        .tooltip-text.active {
            display: block;
            opacity: 1;
        }

        /* --- TOOLTIP Z-INDEX FIX --- */
        .ala-carte-table .table-row .table-cell:first-child:hover {
            z-index: 50 !important; 
        }